目录
今日学习目标：
问题与措施：
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>CSS:
* {
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;
}
