練習一：
京東網頁部分
<!DOCTYPE html>
<html>
<head>
<title>01_exercise</title>
<link rel="stylesheet" href="../../reset.css">
<style>
body{
background-color: antiquewhite;
}
/*設置外部ul樣式*/
.img-list{
/*設置ul的寬度*/
width: 190px;
/*設置ul的高度*/
height:470px;
/*裁剪溢出內容*/
overflow: hidden;
/*使用ul在頁面中居中(實際實例中不需要這麼寫)*/
margin:50px auto;
background-color: #f4f4f4;
}
.img-list li:not(:last-child) {
style
margin-bottom:10px;
}
/*設置圖片大小*/
.img-list img{
width: 100%;
}
/*.img-list img:first-of-type{
margin-top: 4px;
}*/
</style>
</head>
<body>
<ul class="img-list">
<li>
<a href="javascript:;">
<img src="./pictures/01.webp">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./pictures/02.webp">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./pictures/03.webp">
</a>
</li>
</ul>
</body>
</html>
效果圖：
練習2：
京東網頁部分
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../../reset.css">
<style>
body{
background-color: #bfa;
}
.left-nav{
width:190px;
height: 450px;
margin:10px;
padding: 10px 0;
background-color: #fefefe;
margin:50px auto;
}
.left-nav .item{
height: 25px;
/*要讓一個文字在父元素中垂直居中，只需將父元素的line-height設置爲一個和父元素height一樣的值。*/
line-height: 25px;
padding-left:10px;
}
/*爲item設置鼠標移入的狀態*/
.item:hover{
background-color:#d9d9d9;
}
.item a{
/*設置字體大小*/
font-size:14px;
/*設置字體樣式*/
color: #333;
/*取下劃線*/
text-decoration: none;
}
.cate_menu_item{
padding:0px 1px;
font-size: 12px;
}
.item a:hover{
color: #c81623;
}
</style>
</head>
<body>
<!-- 創建一個外部的容器:nav(div),div(div),ul(li) -->
<nav class="left-nav">
<div class="item">
<a href="https://jiadian.jd.com/">家用電器</a>
</div>
<div class="item">
<a href="https://shouji.jd.com/">手機</a>
<span class="cate_menu_item">/</span>
<a href="https://wt.jd.com/">運營商</a>
<span class="cate_menu_item">/</span>
<a href="https://shuma.jd.com/">數碼</a>
</div>
<div class="item">
<a href="https://diannao.jd.com/">電腦</a>
<span class="cate_menu_item">/</span>
<a href="https://bg.jd.com/">辦公</a>
</div>
<div class="item">
<a href="#">家居</a>
<span class="cate_menu_item">/</span>
<a href="#">傢俱</a>
<span class="cate_menu_item">/</span>
<a href="#">家裝</a>
<span class="cate_menu_item">/</span>
<a href="#">廚具</a>
</div>
<div class="item">
<a href="#">男裝</a>
<span class="cate_menu_item">/</span>
<a href="#">女裝</a>
<span class="cate_menu_item">/</span>
<a href="#">童裝</a>
<span class="cate_menu_item">/</span>
<a href="#">內衣</a>
</div>
<div class="item">
<a href="#">美妝</a>
<span class="cate_menu_item">/</span>
<a href="#">個護清潔</a>
<span class="cate_menu_item">/</span>
<a href="#">寵物</a>
</div>
<div class="item">
<a href="#">女鞋</a>
<span class="cate_menu_item">/</span>
<a href="#">箱包</a>
<span class="cate_menu_item">/</span>
<a href="#">鐘錶</a>
<span class="cate_menu_item">/</span>
<a href="#">珠寶</a>
</div>
<div class="item">
<a href="#">男鞋</a>
<span class="cate_menu_item">/</span>
<a href="#">運動</a>
<span class="cate_menu_item">/</span>
<a href="#">戶外</a>
</div>
<div class="item">
<a href="#">房產</a>
<span class="cate_menu_item">/</span>
<a href="#">汽車</a>
<span class="cate_menu_item">/</span>
<a href="#">汽車用品</a>
</div>
<div class="item">
<a href="#">母嬰</a>
<span class="cate_menu_item">/</span>
<a href="#">玩具樂器</a>
</div>
<div class="item">
<a href="#">食品</a>
<span class="cate_menu_item">/</span>
<a href="#">酒類</a>
<span class="cate_menu_item">/</span>
<a href="#">生鮮</a>
<span class="cate_menu_item">/</span>
<a href="#">特產</a>
</div>
<div class="item">
<a href="#">藝術</a>
<span class="cate_menu_item">/</span>
<a href="#">禮品鮮花</a>
<span class="cate_menu_item">/</span>
<a href="#">農資綠植</a>
</div>
<div class="item">
<a href="#">醫藥保健</a>
<span class="cate_menu_item">/</span>
<a href="#">計生</a>
</div>
<div class="item">
<a href="#">圖文</a>
<span class="cate_menu_item">/</span>
<a href="#">文娛</a>
<span class="cate_menu_item">/</span>
<a href="#">教育</a>
<span class="cate_menu_item">/</span>
<a href="#">電子書</a>
</div>
<div class="item">
<a href="#">機票</a>
<span class="cate_menu_item">/</span>
<a href="#">酒店</a>
<span class="cate_menu_item">/</span>
<a href="#">旅遊</a>
<span class="cate_menu_item">/</span>
<a href="#">生活</a>
</div>
<div class="item">
<a href="#">理財</a>
<span class="cate_menu_item">/</span>
<a href="#">衆籌</a>
<span class="cate_menu_item">/</span>
<a href="#">白條</a>
<span class="cate_menu_item">/</span>
<a href="#">保險</a>
</div>
<div class="item">
<a href="#">安裝</a>
<span class="cate_menu_item">/</span>
<a href="#">維修</a>
<span class="cate_menu_item">/</span>
<a href="#">清洗</a>
<span class="cate_menu_item">/</span>
<a href="#">二手</a>
</div>
<div class="item">
<a href="#">工業品</a>
</div>
</nav>
</body>
</html>
效果圖：
聯繫3：
網易新聞網頁的部分
<!DOCTYPE html>
<html>
<head>
<title>03</title>
<link rel="stylesheet" type="text/css" href="../../reset.css">
<style>
/*body{
background-color: #bfa;
}*/
*{
text-decoration: none;
}
/*設置容器樣式*/
.new-wrapper{
width: 300px;
height: 357px;
margin: 50px auto;
background-color: #fff;
/*設置上邊框*/
border-top: 1px solid #ddd;
}
.new-title{
/*爲了邊框和文字寬度一致，需要將h2轉換爲行內塊元素*/
display: inline-block;
/*設置高度*/
height: 30px;
/*設置上邊框*/
border-top: 1px red solid;
/*通過margin-top將h2上移，蓋住上邊框*/
margin-top: -1px;
padding-top: 10px;
}
.new-title a,span{
/*取出下劃線*/
text-decoration:none;
/*設置黑色*/
color: #40406B;
/*加粗*/
font-weight:bold;
}
/*設置圖片容器高度*/
.news-img{
height: 150px;
width: 300px;
}
/*設置圖片的文字效果*/
.img-title{
color: #fff;
/*使文字跑到圖片裏面*/
margin-top:-30px;
/*設置加粗*/
font-weight: bold;
/*設置往右移*/
padding-left:30px;
}
/*設置新聞列表*/
.news-list{
/*設置上外邊距*/
margin-top: 20px;
/*設置左外邊距*/
/*padding-left: 14px;*/
}
/*設置li*/
.news-list li{
margin-bottom:17px;
}
.news-li a{
/*設置字體大小*/
font-size: 14px;
/*設置字體顏色*/
color: #666;
}
/*設置超鏈接鼠標移入樣式*/
.news-li a:hover{
color: red;
}
/*通過before爲每一個li添加項目符號*/
.news-li::before{
content: '■';
color: rgb(218,218,218);
font-size:7px;
margin-right:4px;
}
</style>
</head>
<body>
<!-- 創建新聞列表外側的容器 -->
<div class="new-wrapper">
<!-- 創建一個標題標籤 -->
<h2 class="new-title">
<a href="javascript:;">軍事</a>
<span>.</span>
<a href="javascript:;">航空</a>
</h2>
<!--創建一個圖片的容器 -->
<div class="new-img">
<a href="#">
<img src="./pictures/04.webp">
<!-- 創建圖片標題 -->
<h3 class="img-title">
空降兵的炮兵火力也這麼猛！
</h3>
</a>
</div>
<!-- 新聞列表 -->
<ul class="news-list">
<li class="news-li">
<a href="#">芬蘭岸防炮僞裝成岩石很不起眼</a>
</li>
<li class="news-li">
<a href="#">美國新型火炮精確命中65公里外汽車</a>
</li>
<li class="news-li">
<a href="#">SpaceX首次載人火箭發射任務推遲</a>
</li>
<li class="news-li">
<a href="#">拉美最大航空公司拉達姆宣佈破產重組</a>
</li>
</ul>
</div>
</body>
</html>
結果圖對比：
練習4：
W3school導航條練習
<!DOCTYPE html>
<html>
<head>
<title>W3school導航條練習</title>
<link rel="stylesheet" href="../../reset.css">
<style>
body{
margin:0px;
padding: 0px;
background-color: #fff;
border:0px;
}
.nav{
width:1210px;
height :48px;
background-color: #E8E7E3;
margin: 50px auto;
}
.nav li{
float: left;
/*padding-left:20px; */
height: 48px;
line-height: 48px;/*將元素垂直居中*/
}
.nav a{
/*將a轉換成塊元素，就可以設置寬高了*/
display: block;
text-decoration:none;
color: #777;
/*修改字體大小*/
font-size: 18px;
padding:0 39px;
}
/*.nav li:last-child .r{
padding:0px 42px 0px 41px;
}*/
.nav li .r1{
/*這裏如果只寫.r1的話，.r1的權重<.nav a的權重，所以選擇的時候寫得越具體越好。*/
padding:0px 42px 0px 41px;
}
/*#r2{
padding:0px 42px 0px 41px;
}*/
.nav a:hover{
background-color: #3f3f3f;
color: #E8E7E3;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a class="r1" id="r2" href="#">Reference</a>
</li>
</ul>
</body>
</html>
效果圖：
