目錄
今日學習目标：
作業運作效果：
問題與措施：
代碼：
問題與措施：
1.前端标簽Span 設定圓形邊角後依然顯示得很小！
#container ul li a {
color: black;
}
方法：設定空格符号撐大！！
2.img和input總是無法對其：
設定樣式：
.txtinput {
margin: 10px 0 0 0;
vertical-align: middle;
border: 1px solid #999;
width: 153px;
height: 28px;
}
.txtimg {
width: 28px;
height: 28px;
vertical-align: middle;
border: 1px solid #999;
} 美容品：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 0px;
border-bottom: 1px dashed;
}
#container {
width: 350px;
height: 425px;
border: 1px solid;
}
h3 {
color: white;
font-weight: bold;
background: deeppink;
margin: 0px;
padding: 10px;
}
#container ul li {
list-style: none;
width: 340px;
margin: 10px;
padding: 0px;
}
#container ul li a:link {
text-decoration: none;
}
#container ul li a {
color: black;
}
#container ul li a:hover {
color: red;
text-decoration: underline;
/*懸停是出現下劃線*/
}
#container ul li span:hover {
background: red;
}
span {
color: white;
background: black;
border: 1px solid;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<h3>大家都喜歡買的美容品</h3>
<ul style="padding-left: 0px;">
<li>
<a href="#">
<span> 1 </span>雅詩蘭黛即時修護眼部精華霜15ml
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 2 </span>伊麗莎白雅頓顯效複合活膚霜 75ml
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 3 </span>OLAY玉蘭油多效修護霜 50g
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 4 </span>巨型一号絲瓜水320ML
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 5 </span>倩碧保濕潔膚水2号 200ml
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 6 </span>比度克細膚淡印霜 30g
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 7 </span>蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 8 </span>SK-II護膚精華露 215ml
</a>
</li>
<div></div>
<li>
<a href="#">
<span> 9 </span>歐萊雅青春密碼活顔精華肌底液
</a>
</li>
<div></div>
</ul>
</div>
</body>
</html> 仿京東登入HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/homework6.css"/>
</head>
<body>
<div id="container">
<header>
<div>
<img src="img/logo.png" />
<p>歡迎登入</p>
</div>
</header>
<div id="main">
<div id="loginDiv">
<div id="h">京東會員<span><img src="img/icon5.jpg" />立即注冊</span></div>
<form>
<div>
<img class="txtimg" src="img/icon1.jpg" />
<input class="txtinput" type="text" name="name" />
</div>
<div>
<img class="txtimg" src="img/icon2.jpg" />
<input class="txtinput" type="password" name="pwd" />
</div>
<label class="autologin"><input type="checkbox" name="like" value="0">自動登入</label>
<a href="#">忘記密碼？</a>
<div>
<input type="submit" class="submits" value="登入" />
</div>
</form>
</div>
</div>
<footer>
<div></div>
<div></div>
</footer>
</div>
</body>
</html> * {
padding: 0;
margin: 0;
}
#container {
width: 990px;
height: 500px;
border: 1px solid;
margin: 0 auto;
}
#container>header {
height: 15%;
background: white;
}
#container>#main {
height: 475px;
background: url(../img/banner.png);
}
#container>footer {
height: 15%;
background: red;
}
header>div {
width: 30%;
margin-left: 100px;
}
header>div p {
float: right;
margin-top: 18px;
margin-right: 30px;
}
.txtinput {
margin: 10px 0 0 0;
vertical-align: middle;
border: 1px solid #999;
width: 153px;
height: 28px;
}
.txtimg {
width: 28px;
height: 28px;
vertical-align: middle;
border: 1px solid #999;
}
#loginDiv {
width: 300px;
height: 200px;
background: white;
float: right;
margin-top: 50px;
margin-right: 50px;
}
/*#loginDiv{
width: 300px;
height: 200px;
background: white;
position: absolute;/*絕對定位*/
/* right: 100px;
top: 80px;
}*/
footer>div:first-of-type {
width: 80%;
height: 30px;
background: yellow;
margin: 0 auto;
}
footer>div:nth-of-type(2) {
width: 60%;
height: 30%;
background: grey;
margin: 0 auto;
}
#h {
margin-top: 10px;
margin-left: 10px;
}
#h>span {
float: right;
margin-right: 20px;
font-size: 12px;
color: red;
}
.autologin{
color: grey;
margin-top: 10px;
margin-left: 10px;
font-size: 10px;
width: 20px;
height: 28px;
}
.submits{
width: 200px;
height: 28px;
border: 1px solid #999;
margin-top: 10px;
margin-left: 10px;
background: red;
}
img {
margin-top: 10px;
margin-left: 10px;
}
a{
margin-left: 85px;
font-size: 10px;
color: grey;
text-decoration: none;
}
a:hover{
color: grey;
text-decoration: underline;
}