HTML 第七章作業

阿新 • • 發佈：2018-12-17

課後作業清除浮動的方法有哪幾種？分別如何實現？ 1.給父元素div定義高度height 2. 結尾處加空div標籤 clear:both 3. 父級div定義偽類:after 和 zoom 4. 給div加上overflow：hidden-屬性使用display:inline-block或float佈局頁面有什麼區別？需要注意什麼？ display是設定這一個元素的顯示方式，但是這不同的顯示方式會有不同的排列方式而float是設定元素的排列方式，這就需要看相鄰的元素使用的樣式優先許可權製作攝影社群熱門小鎮頁面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>攝影社群熱門小鎮</title>
		<style type="text/css">
			#nav {
				border: 1px solid #BDBDBD;
				width: 725px;
			}
			
			h3 {
				margin-bottom: 8px;
				font-size: 16px;
				margin-left: 10px;
				margin-top: 10px;
				font-weight: 600;
			}
			.div-box {
				display: inline-block;
				margin-right: 70px;
			}
			.div-box2{
				display: inline-block;
				margin-right: 20px;
			}
			.div-box3{
				display: inline-block;
			}
			.login {
				margin-left: 10px;
				border: 1px solid #BDBDBD;
				padding: 5px;
				width: 60px;
				height: 60px;
				border-radius: 5px;
				display: inline-block;
			}
			
			ul {
				line-height: 20px;
				padding-top: -5px;
				margin-left: -30px;
				list-style-type: none;
				display: inline-block;
			}
			
			a {
				color: #2E75BC;
				text-decoration: none;
			}
			
			.li {
				margin-top: 8px;
			}
			
			li {
				margin-bottom: 2px;
				font-size: 13px;
				color: #BDBDBD;
			}
		</style>

	</head>

	<body>
		<div id="nav">
			<h3>攝影社群熱門小鎮</h3>

			<div class="div-box">
				<div class="login">
					<img src="img/pic_01.jpg" />
				</div>
				<ul>
					<span><a href="#">風景狙擊手</a></span>
					<li class="li">成員：80</li>
					<li>作品：276</li>
				</ul>
			</div>
			<div class="div-box">
				<div class="login">
					<img src="img/pic_02.jpg" />
				</div>
				<ul>
					<span><a href="#">敘事感</a></span>
					<li class="li">成員：235</li>
					<li>作品：116</li>
				</ul>
			</div>
				<div class="div-box">
				<div class="login">
					<img src="img/pic_03.jpg" />
				</div>
				<ul>
					<span><a href="#">定焦視界</a></span>
					<li class="li">成員：50</li>
					<li>作品：456</li>
				</ul>
			</div>
				<div class="div-box">
				<div class="login">
					<img src="img/pic_04.jpg" />
				</div>
				<ul>
					<span><a href="#">中畫幅樂園</a></span>
					<li class="li">成員：130</li>
					<li>作品：239</li>
				</ul>
			</div>
				<div class="div-box2">
				<div class="login">
					<img src="img/pic_05.jpg" />
				</div>
				<ul>
					<span><a href="#">《卡啪》先鋒...</a></span>
					<li class="li">成員：78</li>
					<li>作品：125</li>
				</ul>
			</div>
				<div class="div-box3">
				<div class="login">
					<img src="img/pic_06.jpg" />
				</div>
				<ul>
					<span><a href="#">植物的無聲世界</a></span>
					<li class="li">成員：235</li>
					<li>作品：1258</li>
				</ul>
			</div>
			
		</div>
	</body>

</html>

4.製作名人名言頁面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>名人名言</title>
		<style type="text/css">
			.div {
				margin-left: 400px;
				width: 1260px;
				border-right: 1px solid #CFCFCF;
			}
			
			h2 {
				margin-left: 65px;
				margin-bottom: 10px;
			}
			
			em {
				margin-left: 65px;
			}
			
			ul {
				margin-left: 25px;
			}
			
			ul li {
				margin-top: 15px;
				display: inline-block;
				list-style-type: none;
				border: 1px solid #CFCFCF;
				border-right: none;
				border-bottom: none;
				margin-right: -4px;
				padding: 12px;
			}
			
			.li {
				border-right: 1px solid #CFCFCF;
				;
			}
			
			
			.div-box {
				margin-top: 35px;
				border: 1px solid #CFCFCF;
				width: 580px;
				margin-left: 45px;
				height: 70px;
			}
			
			.h4 {
				margin: 5px 0 2px 10px;
			}
			
			.span {
				margin: 5px 0 0 10px;
				font-size: 14px;
			}
			
			.div2 {
				font-size: 14px;
				margin-left: 45px;
				margin-top: 10px;
				line-height: 20px;
			}
			
			.div3 {
				font-size: 14px;
				margin-left: 45px;
				margin-top: 5px;
			}
			
			.div-box2 {
				padding-left: 10px;
				border: 1px solid #CFCFCF;
				width: 570px;
				margin-left: 45px;
				line-height: 1px;
			}
			
			.div-box4 {
				padding-left: 10px;
				padding-bottom: 10px;
				padding-top: 15px;
				border: 1px solid #CFCFCF;
				width: 570px;
				margin-left: 45px;
			}
			
			.em {
				margin-left: 0px;
			}
			
			img {
				margin-top: 10px;
				display: block;
			}
			
			nav {
				position:absolute;
				top: 195px;
				right: 400px;
			}
			
			.div-box5 {
				width: 370px;
				padding: 35px 0 25px 15px;
				border: 1px solid #CFCFCF;
			}
			
			.img {
				margin-bottom: 15px;
			}
			
			input {
				display: block;
				margin-top: 10px;
				margin-bottom: 15px;
			}
			
			.div4 {
				margin-left: 0px;
				margin-top: 10px;
				line-height: 25px;
				color: #989898;
			}
			.div-box6{
				width: 1200px;
				padding-top:10px;
				text-align: center;
				margin-top: 35px;
				border-top:1px solid #CFCFCF;
				font-size: 14px;
				color: gray;
			}
			.box{
				width: 1200px;
				border-top:1px solid #CFCFCF ;
				margin-top: -15px;
			}
		</style>
	</head>

	<body>
		<div class="div	">
			<header>
				<h2>名人名言</h2>
				<em>分享名人名言，開始一段觸動心靈的智慧之旅跳到內容</em>
				<ul>
					<li>登入</li>
					<li>關於</li>
					<li>名人名言</li>
					<li>英文名言(English)</li>
					<li>心理雜誌</li>
					<li>心理書籍</li>
					<li>專題活動</li>
					<li class="li">發表</li>
				</ul>
			</header>
			<div class="box">
			<article>
				<div class="div-box">
					<h4 class="h4">心理學經典名言的智慧</h4>
					<span class="span">洞察人性的美與醜，認識自我的強與弱。一句好的格言能夠穿越時間，永不失色、歷久彌</span><br /><span class="span">香，它總是能給人們帶來心靈的滋養。</span>
				</div>
				<div class="div2"><strong>創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去<br />實現”。所以，創造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現<br />的能力。 </strong></div>
				<div class="div3">
					創造力（creativity）有兩個詞根：Crera拉丁語的意思是“去創造”。Krainir希臘語的意思是“去實<br />現”。所以，創造力不僅僅是一種想象力、一種天賦，創造力更是一種將自己的想法付諸實現的<br />能力。<br /> 發表在 未分類 | 標籤： 《換個腦袋去思考》, 創造力 | 留下評論
				</div>
				<div class="div-box2">
					<h4>作者簡介</h4>
				</div>
				<div class="div2">
					<strong>如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人<br />生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興<br />趣；如果你想讓他人緊張，那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他<br />們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個人交流時證實這一<br />點。 </strong>
				</div>
				<div class="div3">
					如果你還沒有注意到你有能力讓對方作出你所希望得到的反應，那麼你就還沒有很好地掌握人<br />生的真諦。這其實簡單到不可思議。如果你希望他人對你感興趣，那麼你就要先對他人產生興<br />趣；如果你想讓他人緊張，那麼你自己首先要緊張起來。就是這麼簡單。人們會按照你對待他<br />們的方式對待你。這其中沒有什麼祕訣。看看周圍的人，你可以在與下一個人交流時證實這一<br />點。
					<br /> 發表在 未分類 | 標籤： 《怎樣出售設計創意》, 溫斯頓·丘吉爾 | 留下評論
				</div>
				<div class="div-box4">
					<em class="em">贊助廣告</em>
					<img src="img/ad_2.jpg" />
				</div>
			</article>
			<nav>
				<div class="div-box5">
					<em class="em">贊助廣告</em>
					<img src="img/ad.jpg" class="img" />
					<em class="em">
						搜尋
					</em>
					<input type="search" placeholder="點選搜尋" />
					<em class="em">標籤</em>
					<div class="div4">
						<em class="em">60年語錄 《犯罪心理》 世間百態 二十四史傳統<br />名人 體育人物 卡斯特羅 卡斯特羅名言 卡斯特羅<br />語錄 歷史 友誼愛情 古代格言 名人名言 名人隨語<br /> 教子立人 新聞事件 李白 愛情語錄 韓寒語錄 </em>
					</div>
				</div>
			</nav>
			</div>
			<footer>
				<div class="div-box6">
					&copy;All Rights Reserved by Psytopic. 來自Psytopic.com的禮物
				</div>
			</footer>
		</div>
	</body>

</html>

製作彩妝熱賣產品列表頁面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>彩妝熱賣產品列表</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			body{
				background: #EEE7E1;
			}
			.nav {
				background: white;
				width: 325px;
			}
			
			.title {
				font-weight: 600;
				font-family: "微軟雅黑";
				font-size: 16px;
				background: #E9185A;
				line-height: 40px;
				padding-left: 12px;
				height: 40px;
				color: white;
			}
			ul li {
				list-style-type: none;
			}
			
			a {
				text-decoration: none;
				font-family: "微軟雅黑";
				font-size: 14px;
				color: gray;
			}
			
			li {
				margin-top: 5px;
				border-bottom: 1px dashed gray;
				line-height: 30px;
			}
			
			span {
				font-size: 14px;
				font-family: "微軟雅黑";
				color: white;
				font-weight: bold;
				display: inline-block;
				margin-right: 10px;
				margin-left: 2px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #373B3C;
				line-height: 20px;
				text-align: center;
			}
			
			.nav li div {
				display: none;
				text-align: center;
			}
			
			.nav a:hover div {
				display: block;
			}
			
			a:hover {
				color: #E9185A;
			}
			
			a:hover span {
				background: #E9185A;
			}
		
		</style>
	</head>

	<body>
		<div class="nav">
			<p class="title">大家都喜歡的彩妝</p>

			<ul>
				<li>
					<a href="#">
						<span>1</span>Za姬芮新能真皙美白隔離霜 35g
						<div>
							<img src="img/icon-1.jpg" alt="1 Za姬芮新能真皙美白隔離霜 35g " />
							<p>￥62.00 最近69122人購買</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span>2</span>美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml
						<div>
							<img src="img/icon-2.jpg" alt="美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml " />
							<p>￥89.00 最近13610人購買</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span>3</span>菲奧娜水漾CC霜40g
						<div>
							<img src="img/icon-3.jpg" alt="菲奧娜水漾CC霜40g " />
							<p>￥59.90 最近13403人購買</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<span>4</span>DHC 蝶翠詩橄欖卸妝油 200ml
						<div>
							<img src="img/icon-4.jpg" alt="DHC 蝶翠詩橄欖卸妝油 200ml " />
							<p>￥169.00 最近16757人購買</p>
						</div>
					</a>
				</li>
			</ul>

		</div>
	</body>

</html>

HTML 第七章作業

HTML 第七章作業

第七章作業

HTML第七章

HTML第三章作業

HTML第七章總結

HTML 第四章作業

HTML 第五章作業

HTML 第九章作業

JavaScript 第七章作業

HTML 第八章作業

HTML 第六章作業

HTML 第三章作業

HTML第四章作業

HTML第五章作業

HTML第七章上機練習2

HTML第七章上機練習1

C primer Plus作業第七章

深入理解計算機系統--第七章課後作業

哈工大計算機系統課後作業第七章7.13A的解釋

高階程式設計技術課後作業第七章練習

HTML 第七章 作業

相關推薦

HTML 第七章作業