HTML5和CSS3開發第七章課後作業
3.製作攝影社群熱門小鎮頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>攝影社群熱門小鎮</title>
<style>
*{padding: 0px;margin: 0px}
p{
margin: 10px 10px;
font-size: 15px;
color: #4F5153;
}
div:after{
content: "";
display: block;
clear: both;
}
img{
border: 3px solid #E0E0E8;
}
dl dd{
margin: 10px 50px 20px 10px;
float: left;
}
dd ul{
margin-left: 15px;
font-size: 12px;
color: gray;
}
ul li{
list-style-type: none;
}
ul li:first-of-type{
font-size: 14px;
color: #4987C5;
margin-bottom: 6px;
}
dl dd:nth-of-type(3){
margin-left: 48px;
}
</style>
</head>
<body>
<div style=" width: 750px;margin: 50px auto;">
<div style="border: 1px solid gray">
<p>攝影社群熱門小鎮</p>
<dl class="info" >
<dd style="">
<img src="images/homework3/pic_01.jpg" style="float: left">
<ul style="display: inline-block">
<li>風景狙擊手</li>
<li>成員：80</li>
<li>作品：276</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_02.jpg" style="float: left">
<ul style="display: inline-block">
<li>敘事感</li>
<li>成員：235</li>
<li>作品：116</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_03.jpg" style="float: left">
<ul style="display: inline-block">
<li>定焦視界</li>
<li>成員：56</li>
<li>作品：456</li>
</ul>
</dd>
<dd >
<img src="images/homework3/pic_04.jpg" style="float: left">
<ul style="display: inline-block">
<li>中畫幅樂園</li>
<li>成員：130</li>
<li>作品：239</li>
</ul>
</dd>
<dd>
<img src="images/homework3/pic_05.jpg" style="float: left">
<ul style="display: inline-block">
<li>《卡啪》先鋒...</li>
<li>成員：78</li>
<li>作品：125</li>
</ul>
</dd>
<dd>
<img src="images/homework3/pic_06.jpg" style="float: left">
<ul style="display: inline-block">
<li>植物的無聲世界</li>
<li>成員：235</li>
<li>作品：1258</li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>4.製作名人名言頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名人名言</title>
<style>
body{font-size: 14px}
ul li{
float: left;
border-left: gray solid 1.0px;
border-top: gray solid 1.0px;
list-style-type: none;
padding: 5px;
}
h1{
font-size: 24px;
}
em{
font-size: 14px;
}
a{text-decoration: none;color: gray}
</style>
</head>
<body style="width: 1200px;margin: 0px auto;">
<header style="width: 1200px;height: 130px">
<h1>名人名言</h1>
<p><em>分享名人名言，開始一段觸動心靈的智慧之旅跳到內容</em></p>
<ul style="height: 20px;padding-left: 0px">
<li><a href="#">登入</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">名人名言</a></li>
<li><a href="#">英文名言(English)</a></li>
<li><a href="#">心理雜誌</a></li>
<li><a href="#">心理書籍</a></li>
<li><a href="#">專題活動</a></li>
<li style="border-right:1px solid gray "><a href="#">發表</a></li>
</ul>
<div style="width: 1300px;margin: -5px -50px;border-top:1px solid gray "></div>
</header>
<section style="width: 1200px;height: 735px">
<div style="width: 560px;display: inline-block">
<p style="width: 550px;border: 1px solid gray;padding:5px 5px">
<span>心理學經典名言的智慧</span><br/>
洞察人性的美與醜，認識自我的強與弱。一句好的格言能夠穿越時間，永不失色、歷久彌香，它總是能給人們帶來心靈的滋養。
</p>
<p style="line-height: 25px;font-weight: bold;width: 550px">
創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以，創
造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現的能力。
</p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實現”。所以，創
造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現的能力。<br>
發表在 未分類 | 標籤： 《換個腦袋去思考》, 創造力 | 留下評論
</p>
<div style="width: 550px;border: 1px solid gray;padding: 5px">
<span style="font-size:16px;font-weight: bold ">作者簡介</span>
</div>
<p style="line-height: 25px;font-weight: bold;width: 550px">
如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人生的真諦。這其實簡單到
不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興趣；如果你想讓他人緊張，那麼你自己首先要緊張
起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個
人交流時證實這一點。
</p>
<p style="line-height: 25px;width: 550px;margin-bottom: 0px">
如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人生的真諦。這其實簡單到
不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興趣；如果你想讓他人緊張，那麼你自己首先要緊張
起來。就是這麼簡單。人們會按照你對待他們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個
人交流時證實這一點。<br>
發表在 未分類 | 標籤： 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論
</p>
<div style="border: 1px solid gray">
<p>贊助廣告</p>
<img src="images/homework4/ad_2.jpg" >
</div>
</div>
<div style="width:350px;height: 500px;float: right;margin-right:150px ">
<div style="border: 1px solid gray;font-size: 16px;margin:0px 0px 0px 20px;padding: 20px">
<p><em>贊助廣告</em></p>
<div><img src="images/homework4/ad.jpg"></div>
<p><em>搜尋</em></p>
<div><input type="search" placeholder="點選搜尋"></div>
<p><em>標籤</em></p>
<p style="color: gray;width: 300px"><em>60年語錄 《犯罪心理》 世間百態 二十四史傳統名人 體育人物 卡斯特羅 卡斯特羅名言 卡斯特羅語錄
歷史 友誼愛情 古代格言 名人名言 名人隨語 教子立人 新聞事件 李白 愛情語錄 韓寒語錄 </em></p>
</div>
</div>
</section>
<footer style="text-align: center;margin-top: 20px">
<div style="border-bottom: 1px gray solid;width: 1300px;margin: -5px -50px;"></div>
<p>
©All Rignts Reserved by Psytopic.來自Psytopic.com的禮物
</p>
</footer>
</body>
5.製作彩妝熱賣產品列表頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彩妝熱賣產品列表</title>
<style>
.title{
color: white;
font-weight: bold;
background-color: #E9185A;
height:40px;
line-height: 40px;
padding-left: 10px;
margin-top: 0px;
}
li{
list-style-type: none;
font-size: 14px;
border: 0.5px dashed gray;
padding: 6px;
}
ul{
width: 300px;
margin: -17px 60px 0px -40px;
background: white;
}
span{
width: 20px;
height: 20px;
border-radius:50%;
line-height: 20px;
text-align: center;
display: inline-block;
margin-right: 10px;
color: white;
font-weight: bold;
background-color: black;
}
a{
text-decoration: none;
color: gray;
}
a:hover{
color: #E9185A;
}
a:hover span{
background-color: #E9185A;
}
ul li div{
display: none;
text-align: center;
}
li a:hover div{
display: block;
}
</style>
</head>
<body style="background-color: #EEE7E1">
<div style="width: 300px;padding: 0px">
<p class="title">大家都喜歡的彩妝</p>
<ul>
<li>
<a href="#"><span>1</span>
Za姬芮新能真皙美白隔離霜 35g
<div>
<img src="images/homework5/icon-1.jpg">
<p>￥62.00 最近69122人購買</p>
</div>
</a>
</li>
<li>
<a href="#"><span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml
<div>
<img src="images/homework5/icon-2.jpg">
<p>￥89.00 最近13610人購買</p>
</div>
</a>
</li>
<li>
<a href="#"><span>3</span>菲奧娜水漾CC霜40g
<div>
<img src="images/homework5/icon-3.jpg">
<p> ￥59.90 最近13403人購買</p>
</div>
</a>
</li>
<li>
<a href="#"><span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml
<div>
<img src="images/homework5/icon-4.jpg">
<p>￥169.00 最近16757人購買</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>相關文章
- HTML5和CSS3開發第五章課後作業HTMLCSSS3
- HTML5和CSS3開發第八章課後作業HTMLCSSS3
- HTML5和CSS3開發第六章課後作業HTMLCSSS3
- HTML5和CSS3開發第九章課後作業HTMLCSSS3
- jQuery第七章課後作業jQuery
- HTML5和CSS3開發第七章知識點HTMLCSSS3
- JAVA課後作業Java
- 開課作業
- 課後作業1：字串加密字串加密
- 軟體開發與創新課程設計-第一週課後作業-軟體二次開發
- python第七章課後習題Python
- 微信後臺開發作業講解
- jQuery第五章課後作業jQuery
- jQuery第二章課後作業jQuery
- 軟體工程概論 第一課：課後作業1軟體工程
- jQuery第三章課後作業jQuery
- jQuery第四章課後作業jQuery
- jQuery第六章課後作業jQuery
- jQuery第一章課後作業jQuery
- PHP基礎教程-22 課後作業05PHP
- PHP基礎教程-27 課後作業06PHP
- PHP基礎教程-28 課後作業07PHP
- PHP基礎教程-21 課後作業04PHP
- PHP基礎教程-12 課後作業02PHP
- PHP基礎教程-13 課後作業03PHP
- PHP基礎教程-06 課後作業01PHP
- 課後作業——30道四則運算
- HTML5和CSS3開發第八章知識點HTMLCSSS3
- HTML5和CSS3開發第六章知識點HTMLCSSS3
- HTML5和CSS3開發第九章知識點HTMLCSSS3
- HTML5和CSS3提高HTMLCSSS3
- 《iOS應用開發指南——使用HTML5、CSS3和JavaScript》——1.6 小結iOSHTMLCSSS3JavaScript
- HTML5前端開發就業前景，高薪背後的原因分析HTML前端就業高薪
- 90後大學生開發開源作業系統核心Lencer作業系統
- 《Python程式設計》第七章部分課後練習題Python程式設計
- 不要痴迷於HTML5 和 CSS3HTMLCSSS3
- 【HTML5】Web前端——第四課：CSS3新增選擇器HTMLWeb前端CSSS3
- 9.23課堂作業