学习是一个由浅入深，循序渐进的过程，理论的堆砌永远没有动手实践来的快，学习了一小段时间，记录一下我的小小的练习。
1.我的第一个dome（百度首页）
html部分：
<div class="header clearfix">
<ul class="nav">
<li><a href="#" target="_black">新闻</a></li>
<li><a href="#" target="_black">hao123</a></li>
<li><a href="#" target="_black">地图</a></li>
<li><a href="#" target="_black">视频</a></li>
<li><a href="#" target="_black">贴吧</a></li>
<li class="font"><a href="#" target="_black" >登录</a></li>
<li class="font menu2"><a href="#" target="_black" >设置 </a></li>
<li class="produce menu2"><a href="#" target="_black" >更多产品</a></li>
</ul>
</div>
<div class="mainbody clearfix">
<img src="images/bd_logo1.png"/>
<div class="search">
<form action="#" method="post">
<input type="text" class="search-box" />
<input type="submit" value="百度一下" class="btn">
</form>
</div>
</div>
<div class="footer clearfix">
<ul>
<li><a href="#" target="_black">把百度设为首页</a></li>
<li><a href="#" target="_black">关于百度</a></li>
<li><a href="#" target="_black">AboutBaidu</a></li>
</ul>
<p>©2015 Baidu <a href="#" target="_black">使用百度前必读</a> <a href="#" target="_black">意见反馈</a> 京ICP证030173号 </p>
</div>
css部分：
html,body,div,ul,li,p{margin:0;padding:0}
.header {padding-top:30px; padding-right:20px; font-size:14px; height:40px;}
li {list-style:none;}
.clearfix:after {display:block; content: " "; width:0; height:0;}
.header .nav {float:right; height:40px;}
.header .nav > li { float: left; margin-left:10px; padding:3px 5px;}
.header .nav > li > a { font-weight: bold; color:#000000;}
.header .nav .font,.produce { position: relative; font-weight:normal;}
.header .nav .menu2:hover .menu { display: block;}
.header .nav .font > a { font-weight: normal;}
.header .nav .produce {background-color: #3487F2;}
.header .nav .produce > a {font-weight: normal; color:#FFFFFF; text-decoration: none;}
.mainbody {width:600px; height:400px; margin:auto;}
.mainbody img { width:405px; height:193.5px; margin:0px 100px;}
.mainbody .search-box { width:500px; height:30px; border:1px solid #3487F2; padding-left:20px; margin-top:20px;}
.mainbody .btn { width:70px; height:34px; color:#FFFFFF; background:#3487F2; border:1px solid #3487F2; margin-left:-4px; cursor: pointer;}
.footer { width:350px; margin:80px auto; font-size:12px;}
.footer ul { height:20px;}
.footer ul li { float:left; margin:0 20px; list-style:none;}
.footer p {color:#9E9E9E;}
.footer p a{color:#9E9E9E;}
运行结果点击 这里......
2.我的第二个demo（淘宝登录框）
html部分：
<div class="header">
<img src="images/logo.png" />
</div>
<div class="main">
<img src="images/pic.jpg" />
<div class="loginbox">
<div class="warp">
<h3><a href="#" class="login1">快速登录</a></h3>
<h3><a href="#" class="login2">账号密码登录</a></h3>
<div class="speed-login">
<img src="images/2.jpg" />
<h5>手机扫码 安全登录</h5>
<p>使用<a href="#">手机淘宝</a>、<a href="#">阿里钱盾</a>扫描二维码</p>
</div>
<div class="psd-login">
<from>
<input type="text" class="user" placeholder="会员名/邮箱" required="required"/>
<input type="password" class="psd" required="required" />
</from>
<div class="forget">
<a href="#">忘记登录密码?</a>
<a href="#">免费注册</a>
</div>
<div class="login">
<a href="#" style="color:#FFFFFF">登 录</a>
</div>
<ul>
<li class="weibo"><a href="#">微博登录</a></li>
<li class="alipay"><a href="#">支付宝</a></li>
</ul>
</div>
</div>
</div>
</div>
css部分：
* {margin:0;padding:0}
a {text-decoration: none;}
.header { height:50px; margin:30px 70px;}
.main {width:900px; margin:70px auto; position:relative;}
.main .loginbox {float: right; width:315px; height:335px; top:0; right:0; border:2px solid #BBBBBB; border-top:2px solid #FF8C00;}
.main .loginbox .warp { width:250px;margin:0 auto;}
.loginbox .warp h3 {float: left; width:125px; height:50px; line-height:50px; font-size:14px; text-align: center; border-bottom:1px solid #9E9E9E; color:#9E9E9E;}
.loginbox .warp .speed-login {display: none; width:250px; text-align: center;}
.loginbox .warp .speed-login img {margin:25px 65px;}
.loginbox .warp .speed-login h5 {font-size:14px; color:#9E9E9E; }
.loginbox .warp .speed-login p {font-size:12px;margin-top:15px;}
.loginbox .warp .speed-login p a {text-decoration:none; color:#FF8C00;}
.loginbox .warp .speed-login p a:hover {text-decoration:underline;}
.loginbox .warp .psd-login {width:250px; font-size:12px;}
.warp .psd-login form {width:250px; height:120px;}
.warp .psd-login input {margin-top:18px; width:200px; height:33px; border:1px solid #BBBBBB;}
.psd-login .user {background:url(images/user.jpg) no-repeat; padding-left:50px; color:#BBBBBB;}
.psd-login .psd {background:url(images/psd.jpg) no-repeat; padding-left:50px;}
.psd-login .forget {margin-top:30px;}
.psd-login .forget a {width:250px; text-decoration: none; color:#000000;}
.psd-login .forget a:hover {text-decoration:underline;color:#FF8C00;}
.psd-login .login {width:245px; height:30px; line-height:30px; background:#FF8C00; margin-top:20px; text-align: center; font-weight:bold;}
.psd-login ul {margin-top:20px;}
.psd-login ul li {list-style:none; width:60px; height:25px; line-height:25px; float:left; padding-left:20px;}
.psd-login ul li a {text-decoration: none; font-weight:10px;}
.psd-login ul li a:hover {text-decoration:underline; color:#FF8C00;}
.psd-login ul .weibo {background:url(images/weibo.jpg) no-repeat;}
.psd-login ul .alipay{background:url(images/alipay.jpg) no-repeat;}
一小段jq小试牛刀：
$(function(){
$(".main .loginbox .warp .login1").bind("click",function(){
$(".speed-login").show();
$(".psd-login").hide();
})
$(".main .loginbox .warp .login2").bind("click",function(){
$(".psd-login").show();
$(".speed-login").hide();
})
})
运行结果点击这里......
3.我的第三个demo（导航栏）
html部分：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服饰</a></li>
<li><a href="#">搭配</a></li>
<li><a href="#">达人</a></li>
<li><a href="#">买手</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">社区</a></li>
</ul>
</nav>
css部分：
* {margin:0;padding:0;}
nav {width:1000px; height:45px; border-top: 3px solid #ff33ff; border-bottom: 1px solid #ff66ff; margin:0 auto;}
nav ul {width:815px; height:45px; display: table-cell; vertical-align:middle; padding-left:93px;}
nav ul li {display:block; float:left; list-style: none; padding:0 20px; text-align:center; font-size: 14px; border-left: 1px dotted #323232;}
nav ul li:last-child {border-right:1px dotted #323232;}
nav ul li:nth-child(4) {background:url("top1.jpg") 20px 1px no-repeat;}
nav ul li:nth-child(4) a {padding-left:25px;}
nav ul li a {text-decoration: none; color:#000; padding:2px 13px;}
nav ul li a:hover { background-color:#ff33ff; opacity:0.5; border-radius:8px; color:#fff;}
运行结果点击这里......
4.我的第四个demo（遮罩）
html部分：
<div class="warp">
<ul>
<li>
<img src="1.jpg" alt=""/>
<p><a href="#">华晨宇-卡西莫多的礼物</a></p>
<p class="rmb">¥<b>40</b>.00</P>
<div></div>
</li>
<li>
<img src="2.jpg" alt=""/>
<p><a href="#">会员优惠，京东电子书畅销</a></p>
<p class="rmb">¥<b>90</b>.00</P>
<div></div>
</li>
<li>
<img src="3.jpg" alt=""/>
<p><a href="#">听妈妈讲故事1元起</a></p>
<p class="rmb">¥<b>40</b>.00</P>
<div></div>
</li>
<li>
<img src="4.jpg" alt=""/>
<p><a href="#">外语 考试书+9元得赠品</a></p>
<p class="rmb">¥<b>114</b>.00</P>
<div></div>
</li>
</ul>
</div>
css部分：
* {margin:0; padding:0;}
li {list-style: none; float: left;}
a {text-decoration: none; color:black;}
.warp {width:890px; height:270px; margin:10px auto; border:1px solid #828282;}
.warp ul li {width:220px; border-left:1px solid #828282; position:relative;}
.warp ul li:first-child {border:none;}
.warp ul li img {display: block; width:160px; height:160px; margin:20px auto;}
.warp ul li p {margin:10px;}
.warp ul li .rmb { color:red;}
.warp ul li .rmb b { font-size: 1.2em;}
.warp ul li:hover div { position:absolute; height:180px; width:220px; margin-top: 0px; left:0; top: 0px; background-color: #fff; opacity: 0.5;}
运行结果点击这里......
5.用css做出如下效果
效果图
html部分：
<div id="demo"></div>
css部分:
#demo { //设置主容器，想对定位，让子元素定位以其为标准
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #333;
}
#demo:after, #demo:before { //在容器中添加两个伪元素，为其添加边框，并相对于父容器进行定位
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after { //用边框写第一个箭头向右的三角形，颜色为白色
border-width: 10px;
border-left-color: #fff;
top: 20px;
}
#demo:before { //用边框写第二个箭头向右的三角形，颜色为黑色，宽度为12，让白色三角形覆盖其上，并用定位做出黑边效果
border-width: 12px;
border-left-color: #000;
top: 18px;
}
更多三角形制作方法点击这里
网友评论