HTLM+CSS案例练习

发布时间：2024年01月14日

?摄影网

HTML?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>摄影网</title>
<link href="CSS/style07.css" type="text/css" rel="stylesheet">
</head>
<body>

<div id="header">
? <div class="con">
? ?? ?<ul class="left">
? ? ?? ?<li>开课吧首页</li>
? ? ? ? <li>创业微学院</li>
? ? ? ? <li>摄影微学院</li>
? ? ? ? <li>微聚</li>
? ? </ul>
? ? <ul class="right">
? ? ?? ?<li><a href="#">登录 | 注册</a></li>
? ? ? ? <li>播放记录</li>
? ? ? ? <li>APP下载</li>
? ? </ul>
? </div>
</div>

<div id="nav">
?? ?<div class="nav_in">
? ? ?? ?<ul>
? ? ? ? ?? ?<li><a href="#"></a></li>
? ? ? ? ? ? <li><a href="#">个人中心</a></li>
? ? ? ? ? ? <li><a href="#">视频播放</a></li>
? ? ? ? </ul>
? ? ? ? <ol>
? ? ? ? ?? ?<li></li>
? ? ? ? ? ? <li></li>
? ? ? ? ? ? <li>󰄪</li>
? ? ? ? ? ? <li></li>
? ? ? ? </ol>
? ? </div>
</div>

? <div class="content">
? ?<p>摄影首页 > 摄影素材 > 手机</p>
? ?<p>正在播放：初学者怎么挑选镜头</p>
? ?<video src="images/video/video.webm" controls></video>
? ?<a href="#">1212</a> ?
? ?<a href="#">收藏</a> ?
? ?<a href="#">分享</a>?
? ?<h3>12.5万次播放</h3> ?? ?
</div>
<div class="list">
?? ?<div class="left">
? ? ?? ?<p>选集-共24集</p>
? ? ? ? <a href="#"><img class="findIn" src="images/pic08_8.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic09_9.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic10_10.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic11_11.jpg"></a>

? ? ? ? <p>相关视频</p>
? ? ? ? <a href="#"><img src="images/pic08_8.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic09_9.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic10_10.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic11_11.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic08_8.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic09_9.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic10_10.jpg"></a>
? ? ? ? <a href="#"><img src="images/pic11_11.jpg"></a>
? ? ? ? <p>评论：</p>
? ? ? ? <div class="last">
? ? ? ? ?? ?<form action="#" method="post">
? ? ? ? ? ? ?? ?<textarea cols="30" rows="10">我来说两句.....</textarea>
? ? ? ? ? ? </form>
? ? ? ? ? ? <span>发表评论</span>
? ? ? ? </div>
? ? </div>
? ? <div class="right">
? ? ?? ?<p>视频信息</p>
? ? ? ? <section>
? ? ? ? ?? ?<h3>初学者怎么挑选镜头</h3>
? ? ? ? ? ? <p>简介：初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头初学者怎么挑选镜头</p>
? ? ? ? ? ? <span>详情</span>
? ? ? ? </section>
? ? ? ? <p>精选活动</p>
? ? ? ? <img src="images/pic12.jpg">
? ? ? ? <img src="images/pic13.jpg">
? ? ? ? <img src="images/pic12.jpg">
? ? </div>
</div>

<footer>
?? ?<div class="foot">
? ? ?? ?<a href="#head"><span>Top</span></a>
? ? ? ? <p>Copyight©2020  开课吧  kaikeba.com  版权所有</p>
? ? </div>
</footer>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{margin:0; padding:0; border:0; list-style:none;}
body{font-family:"微软雅黑",Arial,Helvetica,sans-serif;font-size:14px;background:#2a292b;}
?/* @font-face{font-family:'freshskin';src:url('../fonts/iconfont.ttf') format('truetype')} */
a{color:#333; text-decoration:none;}
input,textarea{outline:none;}
@font-face {
font-family:'freshskin';
src:url('../fonts/iconfont.ttf');
??? ?} ?
/*head*/
#header{
?? ?width:100%;
?? ?height:46px;
?? ?background:#0a2536;
}
#header .con{
?? ?width:1200px;
?? ?margin:0 auto;
}
#header .con .left{float:left;}
#header .con .right{float:right;}
#header .con .left li{
?? ?float:left;
?? ?height:46px;
?? ?line-height:46px;
?? ?margin-right:50px;
?? ?color:#fff;
?? ?cursor:pointer;
}
#header .con .right li{
?? ?float:right;
?? ?height:46px;
?? ?line-height:46px;
?? ?margin-right:50px;
?? ?color:#fff;
?? ?cursor:pointer;
}
#header .con .right li a{color:#fff;}

/*nav*/
#nav{
?? ?width:100%;
?? ?height:55px;
?? ?position:absolute;
?? ?background:rgba(255,255,255,0.8);
?? ?z-index:10;
}
#nav .nav_in{
?? ?width:1200px;
?? ?margin:0 auto;
}
#nav .nav_in ul{float:left;}
#nav ?.nav_in ul li{
?? ?float:left;
?? ?margin-right:50px;
?? ?font-size:18px;
?? ?height:55px;
?? ?line-height:55px;
}
#nav ul li:first-child a{
?? ?display:inline-block;
?? ?height:55px;
?? ?width:118px;
?? ?background:url(../images/LOGO.png) no-repeat center left;
}
#nav .nav_in ol{
?? ?float:right;
?? ?width:300px;
?? ?height:55px;
?? ?font-family:"freshskin";
}
#nav .nav_in ol li{
?? ?float:left;
?? ?width:32px;
?? ?height:32px;
?? ?line-height:32px;
?? ?text-align:center;
?? ?color:#333;
?? ?box-shadow:0 0 0 1px #333 inset;
?? ?transition:box-shadow 0.5s ease 0s;
?? ?border-radius:16px;
?? ?margin:10px 0 0 30px;
?? ?cursor:pointer;
}
#nav .nav_in ol li:hover{
?? ?box-shadow:0 0 0 16px #fff inset;
?? ?color:#333
}

/*content*/
.content{
?? ?color:#ccc;
?? ?width:1200px;
?? ?margin:0 auto 20px;
}
.content p:first-child{
?? ?font-size:16px;
?? ?line-height:50px;
?? ?margin-top:60px;
}
.content p{font-size:20px;}
.content video{
?? ?width:1200px;
?? ?margin:30px 0 20px 0;
}
.content a {
?? ?float:left;
?? ?width:45px;
?? ?height:24px;
?? ?line-height:24px;
?? ?color:#ccc;
?? ?padding-left:30px;
?? ?margin-left:20px;
?? ?background:url(../images/pic05.png) no-repeat left center;
}
.content a:nth-of-type(2){background:url(../images/pic06.png) no-repeat left center;}
.content a:nth-of-type(3){background:url(../images/pic07.png) no-repeat left center;}
.content h3{
?? ?float:right;
?? ?font-weight:normal;
}
.list{
?? ?width:1200px;
?? ?margin:0 auto;
?? ?padding-top:20px;
}
.list .left{
?? ?float:left;
?? ?width:932px;
?? ?height:990px;
}
.list .left p{
?? ?font-size:20px;
?? ?color:#ccc;
?? ?margin-bottom:20px;
}
.list .left a{
?? ?width:218px;
?? ?height:123px;
?? ?float:left;
?? ?margin:0 15px 15px 0;
?? ?overflow:hidden;
?? ?background:url(../images/pic08.jpg);
}
.list .left a:nth-of-type(2),.list .left a:nth-of-type(6),.list .left a:nth-of-type(10){background:url(../images/pic09.jpg);}
.list .left a:nth-of-type(3),.list .left a:nth-of-type(7),.list .left a:nth-of-type(11){background:url(../images/pic10.jpg);}
.list .left a:nth-of-type(4),.list .left a:nth-of-type(8),.list .left a:nth-of-type(12){background:url(../images/pic11.jpg);}
@-webkit-keyframes 'findIn'{
?? ?0%{-webkit-transform:rotate(-360deg);}
?? ?100%{-webkit-transform:none;}
}
.list .left a img:hover{
?? ?display:block;
?? ?-webkit-animation:findIn 1s 1;
?? ?opacity:0;
?? ?transition:all 0.5s ease-in 0s;
}
.list .left .last{
?? ?width:860px;
?? ?background:#fff;
?? ?height:350px;
?? ?padding:25px 0 0 60px;
}
.list .left .last textrarea{
?? ?width:790px;
?? ?height:240px;
?? ?padding:10px 0 0 10px;
?? ?border:1px solid #ccc;
?? ?color:#ccc;
}
.list .left .last span{
?? ?float:right;
?? ?margin:10px 56px 0 0;
?? ?width:100px;
?? ?height:30px;
?? ?line-height:30px;
?? ?text-align:center;
?? ?color:#fff;
?? ?background:#2fade7;
?? ?border-radius:5px;
?? ?resize:none;
}
.list .right{
?? ?float:left;
?? ?width:252px;
?? ?height:990px;
}
.list .right p{
?? ?font-size:20px;
?? ?color:#ccc;
?? ?height:40px;
?? ?border-bottom:2px solid #ccc;
}
.list .right section{
?? ?margin:10px 0 20px 0;
?? ?width:252px;
?? ?height:280px;
?? ?padding-top:20px;
?? ?background:#fff;
?? ?text-align:center;
?? ?color:#ccc;
}
.list .right section p{
?? ?font-size:14px;
?? ?border:none;
?? ?text-align:left;
?? ?height:180px;
?? ?padding:20px 20px 0 20px;
}
.list .right section span{
?? ?color:#2fade7;
?? ?float:right;
?? ?margin-right:20px;
}
.list .right img{
?? ?display:block;
?? ?margin-top:15px;
}

/*footer*/
footer{
?? ?width:100%;
?? ?height:127px;
?? ?margin-top:20px;
?? ?background:#0a2536;
?? ?color:#fff;
?? ?text-align:center;
?? ?clear:both;
}
footer .foot{
?? ?width:1200px;
?? ?height:127px;
?? ?margin:0 auto;
?? ?position:relative;
}
footer span{
?? ?width:58px;
?? ?height:32px;
?? ?line-height:43px;
?? ?text-align:center;
?? ?color:#fff;
?? ?position:absolute;
?? ?top:-31px;
?? ?left:600px;
?? ?margin-left:-29px;
?? ?background:url(../images/sanjiao.png);
}
footer p{line-height:127px;}

视频8

HTML?

<!DOCTYPE html>?? ?
<html>
<head>
<meta charset="utf-8">
<title>视频8</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>

<div id="head">
<div class="con">
<ul class="left">
<li>首页</li>
<li>电影音乐</li>
<li>独家栏目</li>
<li>VIP影院</li>
<li>电影百科</li>
</ul>
<ul class="right">
<li>APP下载</li>
<li>播放记录</li>
<li>登录|注册</li>
</ul>
</div>
</div>

<div id="nav">
<div class="nav_in">
<ul>
<li><a href="#"></a></li>
<li><a href="#">个人中心</a></li>
<li><a href="#">视频播放</a></li>
</ul>
<ol>
<li></li>
<li></li>
<li>&#xef012a;</li>
<li></li>
</ol>
</div>
</div>

<div class="banner">
<div class="banner_pic">
<div class="current"><img class="ban" src="images/banner01.jpg"></div>
</div>
<p>迅速发现最新影视快讯|尽享国内外优秀视频资源|分享观影心得结识新朋友</p>
<p class="ty2">观看最新视频</p>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
<a href="#con" class="sanjiao">
<img src="images/jiantou.png" alt="">
</a>
</div>

<div class="hot">
<h2>最热视频</h2>
<video src="video/pian.mp4" controls></video>
<a href="#"><img src="images/pic02.jpg" ></a>
<a href="#"><img src="images/pic03.jpg" ></a>
<a href="#"><img src="images/pic04.jpg" ></a>
<a href="#"><img src="images/pic05.jpg" ></a>
<a href="#"><img src="images/pic06.jpg" ></a>
</div>
<div class="share">
<h2>观影达人</h2>
<a href="#">
<img src="images/pic07.jpg">
<div class="cur">
<img src="images/pic01.png">
<h3>nosay</h3>
<p>视频：34 订阅粉丝：30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg">
<div class="cur">
<img src="images/pic02.png" >
<h3>nosay</h3>
<p>视频：34 订阅粉丝：30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg">
<div class="cur">
<img src="images/pic03.png">
<h3>nosay</h3>
<p>视频：34 订阅粉丝：30112</p>
<span>订阅</span>
</div>
</a>
<a href="#">
<img src="images/pic07.jpg">
<div class="cur">
<img src="images/pic04.png">
<h3>nosay</h3>
<p>视频：34 订阅粉丝：30112</p>
<span>订阅</span>
</div>
</a>
</div>

<div id="footer">
<div class="foot">
<a href="#head"><span>TOP</span></a>
<p>Copyright?2020 视频8 shipin8.com 版权所有</p>
</div>
</div>

</body>
</html>

?CSS

?/* CSS Document */
body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img,video{
?? ?margin:0;padding1:0;border:0;
?? ?list-style:none;outline:none;
?? ?}
body{
?? ?font-family:"微软雅黑",Arial,Helvetica, sans-serif;font-size:14px;background:#282828;
?? ?}
a{
?? ?color:#333;text-decoration:none;
?? ?}
@font-face{
?? ?font-family:'freshskin';
?? ?src:url('../fonts/iconfont.ttf');
?? ?}
#head{
?? ?width:100%;
?? ?height:46px;
?? ?background:#000;
?? ?}
#head .con{
?? ?width:1200px;
?? ?margin:0 auto;
?? ?}
#head .con .left{float:left;}
#head .con .right{float:right;}
#gead .con .left li{
?? ?float:left;
?? ?height:46px;
?? ?line-height:46px;
?? ?margin-right:50px;
?? ?color:#fff;
?? ?cursor:pointer;
?? ?}
#head .con .right li{
? ? ?float:right;
?? ? height:46px;
?? ? line-height:46px;
?? ? margin-left:50px;
?? ? color:#fff;
?? ? cursor:pointer;
? ? }
#head .con .right li a{color:#fff;}
#nav{
?? ?width:100%;
?? ?height:55px;
?? ?position:absolute;
?? ?background:rgba(255,255,255,0.8);/*设置背景颜色半透明*/
?? ?z-index:10;
?? ?}
#nav .nav_in{
?? ?width:1200px;
?? ?margin:0 auto;
?? ?}
#nav ul{
?? ?float:left;
?? ?}
#nav ul li{
?? ?float:left;
?? ?margin-right:50px;
?? ?fony-size:18px;
?? ?height:55px;
?? ?line-height:55px;
?? ?}
#nav ul li:first-child a{
?? ?display:inline-block;
?? ?height:55px;
?? ?width:118px;
?? ?background:url(../images/LOGO.png) no-repeat center left;
?? ?}
#nav .nav_in ol{
?? ?float:right;
?? ?width:300px;
?? ?height:55px;
?? ?font-family:"freshskin";
?? ?}
#nav .nav_in ol li{
?? ?float:left;
?? ?width:32px;
?? ?height:32px;
?? ?line-height:32px;
?? ?text-align:center;
?? ?color:#333;
?? ?box-shadow:0 0 0 1px #333 inset;
?? ?transition:box-shadow 0.5s ease 0s;
?? ?border-radius:16px;
?? ?margin:10px 0 0 30px;
?? ?cursor:pointer;
?? ?}
#nav .nav_in ol li:hover{
?? ?box-shadow:0 0 0 16px #fff inset;
?? ?color:#333;
?? ?}
.banner{
?? ?width:100%;
?? ?height:720px;
?? ?position:relative;
?? ?color:#fff;
?? ?overflow:hidden;
?? ?text-align:center;
?? ?}
.banner .ban{
?? ?position:absolute;
?? ?top:0;
?? ?left:50%;
?? ?transform:translate(-50%,0);/*设置图片水平50%的偏移位置*/
?? ?}
.banner .current{display:block;}
#button{
?? ?position:absolute;
?? ?left:50%;
?? ?top:90%;
?? ?margin-left:-62px;
?? ?z-index:9999;/*设置按钮的层叠等级为最高*/
?? ?}
#button .but{
?? ?float:left;
?? ?width:28px;
?? ?height:1px;
?? ?border:1px solid #d6d6d6;
?? ?margin-right:20px;
?? ?}
#button li{cursor:pointer;}
#button .current{
?? ?background:#F90;
?? ?float:left;
?? ?width:28px;
?? ?height:1px;
?? ?border:1px solid #F90;
?? ?margin-right:20px;
?? ?}
body:hover .banner h3{
?? ?padding-top:200px;
?? ?opacity:1;
?? ?}
.banner p{
?? ?width:715px;
?? ?position:absolute;
?? ?top:50%;
?? ?left:50%;
?? ?font-size:20px;
?? ?opacity:0;
?? ?transform:translate(-50%,-50%);
?? ?transform:all 0.8s ease-in 0s;
?? ?}
body:hover .banner p{opacity:1;}
.banner .ty2{
?? ?position:absolute;
?? ?top:1000px;
?? ?left:50%;
?? ?font-size:20px;
?? ?opacity:0;
?? ?transform:translate(-50%,0);
?? ?transition:all 0.8s ease-in 0s;
?? ?}
body:hover .banner .ty2{
?? ?position:absolute;
?? ?top:400px;
?? ?opacity:1;
?? ?}
.sanjiao{
?? ?width:40px;
?? ?height:30px;
?? ?padding-top:10px;
?? ?border-radius:20px;
?? ?box-shadow:0 0 0 1px #fff inset;
?? ?text-align:center;
?? ?position:absolute;
?? ?top:1000px;
?? ?left:50%;
?? ?z-index:99999;
?? ?opacity:0;
?? ?transform:translate(-50%,0);
?? ?transition:all 0.8s ease-in 0s;
?? ?}
body:hover .sanjiao{
?? ?position:absolute;
?? ?top:500px;
?? ?opacity:1;
?? ?}
.sanjiao:hover{box-shadow:0 0 0 20px #2fade7 inset;}
.hot{
?? ?width:1200px;
?? ?height:825px;
?? ?margin:0px auto;
?? ?border-bottom: 3px solid #ccc;
?? ?}
.hot h2,.share h2{
?? ?text-align:center;
?? ?color:#eee;
?? ?font-size:36px;
?? ?font-weight:normal;
?? ?line-height:100px;
?? ?}
.hot video{
?? ?float:left;
?? ?width:792px;
?? ?height:448px;
?? ?margin:0 0 12px 17px;
?? ?overflow:hidden;
?? ?background:#000;
?? ?}
.hot a{
?? ?float:left;
?? ?width:388px;
?? ?height:218px;
?? ?overflow:hidden;
?? ?margin:0 0 12px 17px;
?? ?}
.hot video,.hot a:nth-of-type(3),.share a:nth-of-type(1),.share a:nth-of-type(3){
?? ?margin-left:0;
?? ?}
.hot a img,.share a img{display:block;}
.hot a img{transition:all 0.5s ease-in 0s;}
.hot a:hover img{transform:scale(1.1,1.1);
? ? }
.hot video{
?? ?width:795px;
?? ?height:448px;
?? ?overflow:hidden;
?? ?}

?萌宠俱乐部

HTML?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>萌宠俱乐部</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
?? ?<div class="header">
??? ? ? <div class="header_in">
??? ? ? ? ? <img class="left" src="images/logo.png" />
??? ? ? ? ? <img class="right" src="images/pic04.png" />
??? ? ? </div>
? ? </div>
? ? <div class="sticky"><img src="images/banner.jpg" /> </div>
<div class="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 class="last"><a href="#">注册会员</a></li> ??
??? ? ? ?</ul>
? ? ? ? <li class="li"></li>
??? ?</div><div class="content">
?? ? ?<div class="top">会员注册</div>
??? ??? ?<form action="#" method="post">
??? ??? ??? ?<table class="con">
??? ??? ??? ??? ??? ?<tr>
??? ? ? ??? ? ? ? ? ? ? ?<td class="left">昵称：</td>
??? ? ? ??? ? ? ? ? ? ? ?<td><input type="text" ?class="right" /></td>
??? ? ? ??? ? ? ? ? ?</tr>?
??? ? ? ??? ? ? ? ? ?<tr>
??? ? ? ??? ? ? ? ? ? ? ?<td class="left">邮箱：</td>
??? ? ? ??? ? ? ? ? ? ? ?<td><input type="text" class="right" /></td>
??? ? ? ??? ? ? ? ? ?</tr>
??? ? ? ??? ? ? ? ? ?<tr>
??? ? ? ??? ? ? ? ? ? ? ?<td class="left">手机：</td>
??? ? ? ??? ? ? ? ? ? ? ?<td><input type="text" class="right" /></td>
??? ? ? ??? ? ? ? ? ?</tr>
??? ? ? ??? ? ? ? ? ?<tr>
??? ? ? ??? ? ? ? ? ? ? ?<td class="left">设置密码：</td>
??? ? ? ??? ? ? ? ? ? ? ?<td><input type="password" maxlength="8" class="right" /></td>
??? ? ? ??? ? ? ? ? ?</tr>
??? ? ? ??? ? ? ? ? ?<tr>
??? ? ? ??? ? ? ? ? ? ? ?<td class="left">确认密码：</td>
??? ? ? ??? ? ? ? ? ? ? ?<td><input type="password" maxlength="8" class="right" /></td>
??? ? ? ??? ? ? ? ? ?</tr>
??? ? ? ??? ? ? ? ? ??
??? ? ? ??? ?</table>
??? ? ? ?</form>
??? ? ? ?<div class="top">宠物信息</div>
??? ? ? ?<form action="#" method="post">
??? ??? ??? ?<table class="con">
??? ??? ??? ??? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td class="left">所属种类：</td>
??? ? ? ? ? ? ? ? ? ?<td>
??? ? ? ? ? ? ? ? ? ? ? ?<select>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>-请选择-</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>狗</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>猫</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>鼠</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>鸟</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>猪</option>
??? ? ? ? ? ? ? ? ? ? ? ?</select>
??? ? ? ? ? ? ? ? ? ?</td>
??? ? ? ? ? ? ? ?</tr>
??? ??? ??? ??? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td class="left">性别：</td>
??? ? ? ? ? ? ? ? ? ?<td>
??? ? ? ? ? ? ? ? ? ?<label for="boy"><input type="radio" name="sex" id="boy" checked="checked"/>男
??? ?</label>    
??? ? ? ? ? ? ? ? ? ?<label for="girl"><input type="radio" name="sex" id="girl" />女</label>
??? ? ? ? ? ? ? ? ? ?</td>
??? ? ? ? ? ? ? ?</tr>
??? ? ? ? ? ? ? ?
??? ? ? ? ? ? ? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td class="left">年龄：</td>
??? ? ? ? ? ? ? ? ? ?<td>
??? ? ? ? ? ? ? ? ? ? ? ?<select>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option selected="selected">-请选择-</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>1岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>2岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>3岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>4岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>5岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>6岁</option>
??? ? ? ? ? ? ? ? ? ? ? ? ? ?<option>7岁</option>
??? ? ? ? ? ? ? ? ? ? ? ?</select>
??? ? ? ? ? ? ? ? ? ?</td>
??? ? ? ? ? ? ? ?</tr>
??? ? ? ? ? ? ? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td class="left">喜爱的食物：</td>
??? ? ? ? ? ? ? ? ? ?<td>
??? ? ? ? ? ? ? ? ? ? ? ?<label for="one"><input type="checkbox" id="one"/>面食</label>   
??? ? ? ? ? ? ? ? ? ? ? ?<label for="two"><input type="checkbox" id="two"/>青草</label>   
??? ? ? ? ? ? ? ? ? ? ? ?<label for="three"><input type="checkbox" id="three"/>肉类</label>   
??? ? ? ? ? ? ? ? ? ? ? ?<label for="four"><input type="checkbox" id="four"/>杂粮</label>   
??? ? ? ? ? ? ? ? ? ? ? ?<label for="five"><input type="checkbox" id="five"/>水果</label>   
??? ? ? ? ? ? ? ? ? ? ? ?<label for="six"><input type="checkbox" id="six"/>蔬菜</label>
??? ? ? ? ? ? ? ? ? ?</td>
??? ? ? ? ? ? ? ?</tr>
??? ? ? ? ? ? ? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td class="left">备注：</td>
??? ? ? ? ? ? ? ? ? ?<td>
??? ? ? ? ? ? ? ? ? ? ? ?<textarea cols="60" rows="8">请填写备注内容。</textarea>
??? ? ? ? ? ? ? ? ? ?</td>
??? ? ? ? ? ? ? ?</tr>
??? ? ? ? ? ? ? ?<tr>
??? ? ? ? ? ? ? ? ? ?<td colspan="2"><input type="button" value="完成注册" class="btn" /></td>
??? ? ? ? ? ? ? ?</tr>
??? ? ? ??? ? ? ? ? ??
??? ? ? ??? ?</table>
??? ? ? ?</form>
??? ?</div>
??? ?
? ? 
??? ?<div class="footer">Copyright ? 2006-2016 QIANNIANZHILIANcom, All rights reserved.<br />2001-2018，版权所有萌宠俱乐部 85CP备13385453</div>
</body>
</html>

?CSS

?/* CSS Document */
*{margin:0;padding:0;border:0;list-style: none;}
body{font-family: "微软雅黑";font-size: 16px;}
a{text-decoration: none;color:#fff;}
.header{
? ? width:100%;
? ? height: 86px;
? ? background: url(../images/top.jpg) repeat-x;
}
.header_in{
? ? width:980px;
? ? margin:0 auto;
? ? position: relative;
}
.header_in .left{
? ? position: absolute;
? ? left:0;
? ? top:5px;
}
.header_in .right{
? ? position: absolute;
? ? right:78px;
? ? top:13px;
}
.nav{
? ? width:900px;
? ? height:74px;
? ? margin:0 auto;
? ? padding-left: 80px;
? ? background: url(../images/navbg.png) no-repeat;
}?
.nav ul li{
? ? list-style: none;
? ? float: left;
? ? line-height: 45px;
? ? width:100px;
? ? height:48px;
? ? text-align: center;
}
.nav ul li a{
? ? text-decoration: none;
? ? display: block;
? ? width:100px;
? ? height:48px;
}
.nav ul li:hover{background: url(../images/pic03.png) no-repeat;}
.nav ul li.last{background:url(../images/pic03.png) no-repeat;}
.nav ul li:hover~li{
? ? background: none;
}
.lii{
? ? float: left;
? ? padding-left: 190px;
? ? display: block;
? ? line-height: 45px;
? ? width:100px;
? ? height:480px;
? ? text-align: center;
? ? color: #fff;
}
.banner{
? ? width:980px;
? ? height:330px;
? ? margin:0 auto;
? ? background: url(../images/banner.jpg) no-repeat;
}
.content{
? ? width:980px;
? ? height:985px;
? ? margin:0 auto;
? ? background:#f5f5f5;?
}
.content .top{
? ? width:945px;
? ? height:26px;
? ? padding:5px 0 0 35px;
? ? color:#edf7d8;
? ? background: url(../images/pic01.jpg) no-repeat;
}
.content .con{padding:50px 0 45px 250px;}
td{?
? ? height:50px;?
? ? color:#89b52a;
}
tr .left{
? ? width:120px;?
? ? text-align:right;
}
tr .right{
? ? width:310px;?
? ? height:28px;?
? ? padding-left: 10px;
? ? border:1px solid #89b52a;
}
input{vertical-align:middle;}
select{
? ? width:171px;?
? ? border:1px solid #89b52a;?
? ? color:#89b52a;
}
textarea{
? ? width:380px;?
? ? border:1px solid #89b52a;?
? ? resize:none;?
? ? font-size:12px;?
? ? color:#aaa;?
? ? padding:20px;
}
.btn{
? ? border: none;
? ? margin-top: 40px;
? ? width:500px;?
? ? height:40px;
? ? color:#edf7d8;?
? ? font-size: 20px;
? ? font-family: "微软雅黑";
? ? background:url(../images/pic02.png) center center no-repeat;
}
.footer{
? ? width:100%;
? ? height: 86px;
? ? padding-top: 45px;
? ? background: #ccc;
? ? text-align: center;
? ? color:#fff;
}

?爱家居

?HTML

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>爱家居</title>

<link href="css/style04.css" type="text/css" rel="stylesheet" />

</head>

<div id="bg">

<div class="nav">

???? <span class="margin_more">网站首页</span>

????????<span>床和床垫</span>

????????<span>卧室纺织品</span>

????????<span>灯具照明</span>

???????? <span class="search">输入商品名称</span>

????</div>

</div>

<div id="news">

<div class="news_con">

???? <img src="images/news1.jpg" />

???? <h2 class="one">BEST贝达</h2>

???? <p class="two">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p>

<p class="shadow"></p>

????</div>

????<div class="news_con">

???? <img src="images/news2.jpg" />

????????<h2 class="one">PONG波昂</h2>

????????<p class="two">当孩子能做大人做的事，他们会觉得自己也很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因，现在你们可以并排坐在一起尽情放松了。</p>

????????<p class="shadow"></p>

????</div>

????<div class="news_con">

????<img src="images/news3.jpg" />

????<h2 class="one">GUNDE冈德尔</h2>

????<p class="two">一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻微。</p>

????<p class="shadow"></p>

????</div>

</div>

<div id="exhibition">

<div id="exhibition">

????<div class="tittle">

????????<img src="images/shenghuo.png" alt="shenghuo" />

????</div>

???? <div class="pic">

???????? <img src="images/img1.jpg" />

????????????<img src="images/img2.jpg" />

????????????<img src="images/img3.jpg" />

????????</div>

????</div>

</div>

<div id="footer">

爱家居版权所有2016-2026京ICP备2222222号??京公网安备22222222222

</div>

<div class="tree">

<img src="images/erweima.png" />

</div>

</body>

</html>

CSS?

*{margin:0; padding:0; outline:none;border:0;}

body{font-family:"微软雅黑"; background:#fdfdfd;}

#bg{

width:1200px;

height:617px;

background:url(../images/bg.png) no-repeat;

margin:0 auto;

}

.nav{

width:850px;

height:50px;

background:;

margin:0 auto;

padding:50px 0 0 150px;

background:url(../images/logo.png) left center no-repeat;

}

.nav span{

color:#685649;

font-size:16px;

padding:0 30px;

}

.nav .search{

float:right;

width:200px;

height:30px;

line-height:30px;

border-radius:100px;

color:#aaa;

font-size:14px;

background:#fff url(../images/f.png) no-repeat 10px center;

}

/*hard end*/

/*news*/

#news{

width:1200px;

height:455px;

background:url(../images/dongtai.jpg) center top no-repeat;

margin:18px auto;

padding-top:120px;

}

.news_con{

float:left;

margin-left:70px;

}

.news_con .one{

width:284px;

height:50px;

padding-left:10px;

line-height:50px;

font-weight:boldl;

font-size:16px;

border-bottom:1px solid #ddd;

}

.news_con .two{

width:284px;

height:70px;

line-height:20px;

padding:10px 0 0 10px;

font-size:12px;

color:#bbb;

}

.news_con .shadow{

width:294px;

height:5px;

background:url(../images/yinying.jpg) no-repeat;

}

/*news end*/

#exhibition{

width:1200px;

background-image:radial-gradient(ellipse at center,#fff,#d6e4ed);

margin:50px auto;

}

.tittle{

width:636px;

height:150px;

margin:0px auto;

text-align:center;

/*background:url(../imagesenghuo.png) no-repeat center center;*/

}

.pic{

width:1000px;

height:360px;

margin:0 auto;

}

.pic img{margin-left:45px;}

#footer{

width:1200px;

height:80px;

background:url(../images/footer_bg.jpg) repeat-x;

color:#fff;

text-align:center;

line-height:80px;

margin:0 auto;

}

.tree{

position:fixed;

right:5%;

bottom:5%;

}

?网上花店

HTML

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>杨欣月的网上花店</title>

<link href="css/style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div class="header">

<h1><strong>彼岸の花</strong><em>偏安一隅静静生活</em></h1>

????<hr size="2" color="#d1d1d1" width="980px"/>

</div>

<div class="fenlei">

<h2>商品分类</h2>

????<img src="images/banner.jpg" alt="网上花店"/>

????<br /><br />

????<p>我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样芬芳...</p>

????<p>I love flowers,quietly open,never quiet.Little flowers,with the same fragrance...</p>

????<br />

</div>

<div class="bestseller">

<img src="images/bestseller1.png" alt="" />

????<br /><br />

????<img src="images/bestseller2.jpg" alt="" />

????<p class="txt">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。</p>

????<p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。</p>

????<br />

</div>

<div class="shouhou">

<p>品质保障??|??七天无理由退货??|??特色服务体验??|??帮助中心</p>

</div>

<div class="boss">

<img src="images/tuxiang.gif" alt="网上花店" align="left"/>

???<h3>店主：Michael_唐僧</h3>

???<p>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！</p>

???<p>也许这只是秋季里的一场游戏。</p>

???<br /><br /><br />

</div>

</div>

</body>

</html>

CSS?

/* CSS Document */

*{margin:0; padding:0;}

body{background-color:#ededed;font-family:"楷体";font-size:16px;color:#a5a5a5;}

.header{

width:980px;

margin:0 auto 7px;

height:86px;

line-height:86px;

text-align:center;

font-family:"微软雅黑";

color:#a5a5a5;

}

.header h1{ font-weight:normal;}

.header strong{

font-weight:normal;

font-size:30px;

}

.header em{

font-style:normal;

font-size:14px;

}

.fenlei{

width:980px;

margin:0 auto;

}

.fenlei h2{

font-size:14px;

font-family:"微软雅黑";

color:#a5a5a5;

height:42px;

line-height:42px;

}

.fenlei p{

line-height:30px;

text-align:center;

font-size:18px;

}

.bestseller{

width:602px;

margin:0 auto;

}

.bestseller .txt{

line-height:30px;

text-indent:2em;

}

.bestseller .txt em{

font-style:normal;

text-decoration:underline;

}

.shouhou{

width:602px;

margin:0 auto;

text-align:center;

font-family:"微软雅黑";

font-size:16px;

font-weight:bold;

}

.boss{

width:602px;

margin:0 auto;

}

.boss h3,.boss p{text-indent:2em;}

.boss h3{

height:30px;

line-height:30px;

font-family:"微软雅黑";

font-size:18px;

font-weight:normal;

}

.boss p{

font-style:italic;

line-height:26px;

font-size:14px;

}

电影网?

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>电影时间网</title>

</head>

<body>

<div style="width:960px;margin:0 auto">

<div style="height:63px;">

<img src="images/logo.jpg" alt="电影时间" align="left"/>

????<p align="right">电影时间首页??|??登录??|??注册??|??<font color="red">收藏</font></p>

</div>

<hr color="#23aaea" />

<div><img src="images/banner.jpg" /></div>

<div>

<h2>最新电影</h2>

????<hr color="#23aaea" />

???? <img src="images/img_01.jpg" width="91" height="130" />

????????<img src="images/img_02.jpg" width="91" height="130" />

????????<img src="images/img_03.jpg" width="91" height="130" />

????????<img src="images/img_04.jpg" width="91" height="130" />

????????<img src="images/img_05.jpg" width="91" height="130" />

????????<img src="images/img_06.jpg" width="91" height="130" />

????????<img src="images/img_07.jpg" width="91" height="130" />

????????<img src="images/img_08.jpg" width="91" height="130" />

????????<img src="images/img_09.jpg" width="91" height="130" />

????????<img src="images/img_09.jpg" width="91" height="130" />

</div>

<div style="height:358px;">

<h2>热门电影介绍</h2>

????<hr color="#CCC" size="3" />

????<font size="4" color="red">

???? <ins>武汉日夜</ins>

????</font>

????<font size="4" color="blue">

???? <ins>高清视频在线观看?黑马网</ins>

????</font>

????<img src="images/moviebanner.jpg" alt="电影时间" align="right"/>

????<p align="left">

???? <font>上映时间：2021年01月22日</font></br />

????????<font>发行公司：安乐影片</font><br />

????????<font color="blue">主演：<ins>田定远</ins>?<ins>孟宪明</ins>?<ins>杨莉</ins>?<ins>苏洁</ins>?<ins>李青儿</ins>?<ins>曹珊</ins>?<ins>涂盛锦</ins>?<ins>王紫懿</ins></font><br />

????????<font>片长：95分钟</font><br />

????????<font color="red">类型：<em>纪录片</em></font><br />

????????<font>定价：<font color="red"><strong>￥20</strong></font></font><br />

????????<font>2020年初，新冠肺炎疫情暴发，1月23日，武汉关闭离汉通道。900万武汉人与来自全国各地医疗系统及其他行业的一线人员，一起打响武汉抗击新冠肺炎疫情阻击战！《武汉日夜》内容来源于从疫情开始，武汉当地三十多名摄影师在抗疫一线持续拍摄数月，多达数千小时的素材之中。影片以医院重症监护室医护人员及病患为主线，以深夜运送孕妇的志愿者为辅线，展现与疫情抗争、与死神决斗的动人故事。他们的生活，平凡......</font>

????</p>

</div>

<hr color="#23aaea" />

<div>

<img src="images/comment.jpg" alt="网友评论" />

????<hr color="#CCC" size="1" />

????<div>

???? <img src="images/pic01.jpg" alt="" align="left" hspace="10" />

????????<div>

???????? <p>

???????????? <font color="#F60">影迷无敌001</font>????<font size="2" color="#999">2020-6-12 15:38:37</font>

????????????</p>

????????????<p>

???????????? <font size="2">请剧情党们不要太较真电影对魔兽历史的更改，毕竟翻拍的电影，多少会有些出入，我们看的是情怀，哈哈。。。</font>

????????????????<br />

????????????????<font color="#F60" size="2">

???????????????? 来自:大众点评网友

????????????????</font>

????????????</p>

????????</div>

????????<hr color="#CCC" size="1" />

????</div>

????<div>

???? <img src="images/pic02.jpg" alt="" align="left" hspace="10" />

????????<div>

???????? <p>

???????????? <font color="#F60">时光不老</font>????<font size="2" color="#999">2020-3-2 15:05:37</font>

????????????</p>

????????????<p>

???????????? <font color="#F60" size="2">

????????????????来自：星光影院网友

????????????????</font>

????????????</p>

????????</div>

????????<hr color="#CCC" size="1" />

????</div>

????<div>

???? <img src="images/pic03.jpg" alt="" align="left" hspace="10" />

????????<div>

???????? <p>

???????????? <font color="#F60">cocoke</font>????<font size="2" color="#999">2020-2-14 10:38:36</font>

????????????</p>

????????????<p>

???????????? <font size="2">星爷的每一部电影都很经典，重复地看过很多遍，每次都有更深刻的理解和更深的感悟，同样期待《美人鱼》。</font>

????????????????<br />

????????????????<font color="#F60" size="2">

????????????????来自：美团网网友

????????????????</font>

????????????</p>

????????</div>

????????<hr color="#CCC" />

????</div>

</div>

<div>

<p align="center">

<font color="blue">公司简介??|??关于我们??|??联系我们??|??友情链接??|??招聘信息??|??产品答疑</font>

</p>

<p align="center"><font color="#red">免责声明：</font>本网站内容收集于互联网，电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。</p>

<p align="center">欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p>

</div>

</div>

</body>

</html>

博客

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>"xx的博客"</title>

</head>

<body>

<div style="width:980px;margin:0 auto;">

?

<div>

????? <div style="height:56px;">

???????? <img src="images/logo.png" alt="" align="left"/>

??? ??<p align="right">我的博客??|??攻略??|??随笔</p>

??? </div>

????????<hr color="#CCC" />

??</div>

???

???

???<div style="height:470px;">

?? <img src="images/banner1.jpg" alt="" align="left" hspace="12" vspace="12"/>

????<div>

???? <p align="center">

???????? <strong>

???????????? <font face="微软雅黑" size="7" color="#0878ff">博主</font>

????????????????<font face="微软雅黑" size="6" color="#333">简介</font>

????????????<strong>

????????</p>

????????<p>

????????????大家好，我是你们的旅行博主——<font color="#0878ff" size="4">LonelyStone</font>。本人是一名资深旅行主播，外向型的内向人格，对世界的好奇心随年龄增长有增无减。同时是音乐、电影、旅行、文学、篮球、长跑、潜水爱好者。想在老去之前，看遍这颗星球的美好。

????????</p>

????????<p>

????????????旅行格言：<font color="#0878ff"><ins><em><strong>人生不过一场旅行</strong></em></ins></font>,你路过我，我路过你，然后各自回头，敬往事一杯烈酒。比起说走就走的旅行，很多人的生活都是日渐趋于平淡的怅然，缺少了一种享受生活的阳光悠然。

????????</p>

????????<p>

????????????旅行足迹：在纳米比亚的死亡谷、土耳其卡帕多奇亚、日本镰仓、马达加斯加。<font color="#F90"><ins><strong>......[详细]</strong></ins></font>

????????</p>

?????</div> ?

???</div>

???

???

??<div>

??? <h2 align="center">

???????? <font size="6">

???????????????? 塔克拉玛干沙漠：爱我就征服我

????????????????</font>

????????</h2>

????????<p align="center">

???????? <em>

???????????? <font color="#666666">

???????????????? 2019.04.21????地点：塔克拉玛干沙漠

????????????????</font>

????????????</em>

????????</p>

????????<hr color="#CCC"/>

????????<hr color="#CCC">

????????<p>

??????????????在这浩瀚的大漠我看到了姿态各异、生命力极强的胡杨。没有肥沃的土壤、没有充足的水分、没有适宜的环境，面对着寸草不生的塔克拉玛干大沙漠，却有胡杨毅然傲立戈壁，呈现出生命醉人的绿。

????????</p>

????????<img src="images/banner2.jpg" alt="沙漠" vspace="20" />

????<p>

??????????????据说，守护在戈壁的胡杨，一千年不死，一千年不倒，一千年不朽，这种傲然挺立、不屈不挠的精神，深深震动了我，这正像生活在大漠边缘勤劳勇敢的人们。喜欢摄影的我，想努力用自己的视角体会这种精神。

????????<img src="images/banner3.jpg" alt="沙漠" vspace="20" />

????????</p>

???</div>

???

???

???<div>

???<img src="images/icon.gif" alt="logo图像">

???<hr color="#ccc">

???<div>

?????<img src="images/person1.jpg" align="left" hspace="10">

????? ?<div>

????????????<p><font color="#f60">HXZ9_IT</font>????<font color="#999" size="2" >2020-1-2 15:38:37</font></p>

???????????<p> <font size="2">风景太美了，感谢博主的分享，有时间一定去看看！</font><br></p>

????????</div>

????????<hr color="#CCC" size="1">

??</div>

???? <div>

???????<img src="images/person2.jpg" align="left" hspace="10">

?????? ?<div>

???????????<p><font color="#f60">外星人</font>????<font color="#999" size="2" >2020-1-15 15:05:37</font></p>

???????????<p><font size="2">大漠孤烟直，长河落日圆</font><br></p>

??????????

??????</div>

????????<hr color="#ccc" size="1">

????</div>

???????<div>

???? <img src="images/person3.jpg" align="left" hspace="10">

???????? <div>

?????????????<p><font color="#f60">so_cool</font>????<font color="#999" size="2">2020-2-14 10:38:36</font></p>

?????????????<p><font size="2">前几年去过一次，风景可以，适合拍照。</font><br></p>

????????</div>

????????<hr color="#ccc" size="2">

????</div>

??</div>

???

???

??<div style="text-align:center;">

??? <p>

????????<font color="#1d5983" size="2">

???????? 网友意见留言板???<font color="#333">电话: 000-1234567</font> ???欢迎批评指正

????????</font>

??????</p>

??????<p>

?????? <font color="#1d5983" size="2">

???????????? 博客简介 | Abou BOKE | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | BOKE English | 注册 | 产品答疑

????????</font>

??????</p>

??????<p>

?????? <font size="2">

???????? Copyright ? 2016 - 2026 BOKE.coright ALL Rights Reserved

???????</font>

??????</p>

??</div>

??

</div>

</body>

文章来源:https://blog.csdn.net/2301_79795370/article/details/135576721
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！