摄影
摄影HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>摄影网站</title>
<link href="css/style08.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--header-->
<div id="head">
<div class="con">
<ul class="left">
<li>开课吧首页</li>
<li>创业微学院</li>
<li>摄影微学院</li>
<li>微聚</li>
</ul>
<ul class="right">
<li>登录 | 注册</li>
<li>播放记录</li>
<li>APP下载</li>
</ul>
</div>
</div>
<!--header-->
<!--nav-->
<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>
<!--nav-->
<!--banner-->
<div class="content">
<p>摄影首页 > 摄影素材 > 手机</p>
<p>正在播放：初学者怎么挑选镜头</p>
<video src="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 src="images/pic08.jpg"></a>
<a href="#"><img src="images/pic09.jpg"></a>
<a href="#"><img src="images/pic10.jpg"></a>
<a href="#"><img src="images/pic11.jpg"></a>
<br>
<p>相关视频</p>
<a href="#"><img src="images/pic08.jpg"></a>
<a href="#"><img src="images/pic09.jpg"></a>
<a href="#"><img src="images/pic10.jpg"></a>
<a href="#"><img src="images/pic11.jpg"></a>
<br>
<a href="#"><img src="images/pic08.jpg"></a>
<a href="#"><img src="images/pic09.jpg"></a>
<a href="#"><img src="images/pic10.jpg"></a>
<a href="#"><img src="images/pic11.jpg"></a>
<p>评论:</p>
<div class="last">
<form action="#" method="post">
<textarea cols="30" rows="10" placeholder="我来说两句....."></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>
</div>
<!--banner-->
<!--footer-->
<footer>
<div class="foot">
<a href="#head"><span>Top</span></a>
<p>Copyight©2020 开课吧 kaikeba.com 版权所有</p>
</div>
</div>
</footer>
<!--footer-->
<!--header-->
<!--header-->
</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:#000;
}
/* @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(file:///D|/HuaweiMoveData/Users/86133/OneDrive/%E6%A1%8C%E9%9D%A2/%E5%AD%A6%E7%94%9F%E4%BC%9A%E4%B8%8E%E5%AD%A6%E4%B9%A0/%E5%AD%A6%E4%B9%A0/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/%E9%A1%B9%E7%9B%AE7/fonts/fonts/iconfont.ttf);
}
/* CSS header*/
#head{
width:100%;
padding:0;
height:46px;
background:#0a2536;
}
#head .con{
width:1200px;
padding:0;
margin:0 auto;
position:relative;
}
#head .con .left{
float:left;
position:absolute;
left:50px;
}
#head .con .right{
float:right;
position:absolute;
right:50px;
}
#head .con .left li{
float:left;
height:46px;
line-height:46px;
margin-right:50px;
color:#fff;
cursor:pointer;
}
#head .con .right li{
float:left;
height:46px;
line-height:46px;
margin-left:50px;
color:#fff;
cursor:pointer;
}
#head .con .right li a{
color:#fff;
}
/* CSS header*/
/* CSS nav*/
#nav{
width:100%;
height:55px;
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;
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
}
/* CSS nav*/
/* CSS banner*/
.content{
color:#ccc;
width:1200px;
margin:0 auto;
}
.content p:first-child{
font-size:16px;
line-height:50px;
margin-top:40px;
}
.content p{font-size:20px;}
.content video{
width:1200px;
margin:30px 0 20px 0;
}
.content a {
float:left;
width:45px;
height:25px;
line-height:25px;
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;
}
/* CSS banner*/
/* CSS footer*/
footer{
width:100%;
height:127px;
margin-top:20px;
background:#0a2536;
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;
margin-top:20px;
color:#fff;
text-align:center;
}
/* CSS footer*/
/* CSS header*/
/* CSS header*/
花店
网上花店HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网上花店</title>
<link rel="stylesheet" href="CSS/style03.css" type="text/css"
</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="remai">
<img src="images/bestseller1.png" alt="热卖"/>
<br /><br />
<img src="images/bestseller2.jpg" alt="花图"/>
<br /><br />
<p class="txt">多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。
</p>
<p class="txt"><em>全世界共有多肉植物一万余种</em>，它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。
</p>
<br /><br />
</div>
<!--热卖模块结束-->
<!--页脚开始-->
<div class="yejiao">
<div class="shouhou">
<p>品质保障 | 七天无理由退换货 | 特色服务体验 | 帮助中心</p>
</div>
<div class="dianzhu">
<img src="images/tuxiang.gif" alt="店主" align="left"/>
<h3>店主：Michael_唐僧</h3>
<p>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！</p>
<p>也许这只是秋季里的一场游戏。</p>
<br /><br /><br />
</div>
</div>
<!--页脚结束-->
</body>
</html>
网上花店CSS：
@charset "utf-8";
/* CSS Document */
/*清除内外边距*/
*{
margin:0;
padding:0;
}
body{
background-color:#dedede;
font-family:"楷体";
font-size:16px;
color:#a5a5a5;
}
.header{
width:980px;
margin:0 auto 7px;
font-family:"微软雅黑";
height:86px;
line-height:86px;
text-align:center;
color:#a5a5a5;
}
/*行高=高，文字可以垂直居中(line-height)*/
.header h1 {
font-weight:400;
}
.header strong {
font-weight:400;
font-size:30px;
}
.header em {
font-style:normal;
font-weight:400;
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;
}
.remai{
width:602px;
margin:0 auto;
}
.remai .txt{
line-height:30px;
text-indent:2em;
}
.remai .txt em{
font-style:normal;
text-decoration:underline;/*下划线*/
}
.yejiao .shouhou{
width:602px;
margin:0 auto;
text-align:center;
font-family:"微软雅黑";
font-size:16px;
font-weight:bold;
}
.yejiao .dianzhu{
width:602px;
margin:0 auto;
}
.yejiao .dianzhu h3, .dianzhu p{
text-indent:2em;
}
.yejiao .dianzhu h3{
height:30px;
line-height:30px;
font-family:"微软雅黑";
font-size:18px;
font-weight:normal;
}
.yejiao .dianzhu p{
font-style:italic;
line-height:26px;
font-size:14px;
}
家居
爱家居HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>爱家居</title>
<link href="css/style04.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--导航开始模块-->
<div id="dh">
<div class="one">
<span class="wzsy">网站首页</span>
<span>床和床垫</span>
<span>卧室纺织品</span>
<span>灯具照明</span>
<span class="srspmc">输入商品名称</span>
</div>
</div>
<!--导航结束模块-->
<!--热门推荐开始模块-->
<div id="rm">
<div class="two">
<img src="images/news1.jpg" />
<h2 class="onee">BEST贝达</h2>
<p class="twoo">将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p>
<p class="yy"></p>
</div>
<div class="two">
<img src="images/news2.jpg" />
<h2 class="onee">PONG波昂</h2>
<p class="twoo">当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p>
<p class="yy"></p>
</div>
<div class="two">
<img src="images/news3.jpg" />
<h2 class="onee">GUNDE冈德尔</h2>
<p class="twoo">一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p>
<p class="yy"></p>
</div>
</div>
<!--热门推荐结束模块-->
<!--夏日生活开始模块-->
<div id="xr">
<div class="sh">
</div>
<div class="three">
<img src="images/img1.jpg" />
<img src="images/img2.jpg" />
<img src="images/img3.jpg" />
</div>
</div>
<!--夏日生活结束模块-->
<!--版权信息开始模块-->
<div id="bq">
爱家居版权所有2016-2026京ICP备2222222号 京公网安备22222222222
</div>
<!--版权信息结束模块-->
<!--悬浮框开始模块-->
<div class="xf">
<img src="images/erweima.png" />
</div>
<!--悬浮框结束模块-->
</body>
</html>
爱家居CSS：
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
outline:none;
border:0;
}
body{
font-family:"微软雅黑";
background:#fdfdfd;
}
#dh{
width:1200px;
height:617px;
background:url(../images/bg.png) no-repeat;
margin:0 auto;
}
.one{
width:850px;
height:50px;
margin:0 auto;
padding:50px 0 0 150px;
background:url(../images/logo.png) left center no-repeat;
}
.one span{
color:#685649;
font-size:16px;
padding:0 30px;
}
.one .srspmc{
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;
}
#rm{
width:1200px;
height:455px;
background:url(../images/dongtai.jpg) center top no-repeat;
margin:18px auto;
padding-top:120px;
}
.two{
float:left;/*浮动*/
margin-left:70px;
}
.two .onee{
width:284px;
height:50px;
padding-left:10px;
line-height:50px;
font-weight:bold;
font-size:16px;
border-bottom:1px solid #ddd;
}
.two .twoo{
width:284px;
height:70px;
line-height:20px;
padding:10px 0 0 10px;
font-size:12px;
color:#bbb;
}
.two .yy{
width:294px;
height:5px;
background:url(../images/yinying.jpg) no-repeat;
}
#xr{
width:1200px;
background-image:radial-gradient(ellipse at center,#fff,#d6e4ed);/*椭圆径向渐变*/
margin:50px auto;
}
.sh{
width:636px;
height:150px;
margin:0px auto;
background:url(../images/shenghuo.png) no-repeat center;
}
.three{
width:1000px;
height:360px;
margin:0px auto;
}
.three img{
margin-left:45px;
}
#bq{
width:1200px;
height:80px;
background:url(../images/footer_bg.jpg) repeat-x;
color:#fff;
text-align:center;
line-height:80px;
margin:0 auto;
}
.xf{
position:fixed;/*固定*/
right:5%;
bottom:5%;
}
宠物
宠物网站HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宠物网站</title>
<link href="css/style06.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--头部模块开始-->
<div id="one">
<div class="toubu">
<img class="left" src="images/logo.png"/>
<img class="right" src="images/pic04.png"/>
</div>
</div>
<br>
<!--头部模块结束-->
<!--导航模块开始-->
<div id="daohang">
<ul class="dh">
<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>
</div>
<!--导航模块开始-->
<!--banner模块开始-->
<div id="two">
<img src="images/banner.jpg"/>
</div>
<!--banner模块结束-->
<!--内容模块开始-->
<div id="three">
<div class="top">
会员注册
</div>
<br/>
<br/>
<div class="biao">
<form action="#" method="post">
<table class="table">
<tr><td class="leftt">昵称：
<input type="text" class="rightt" maxlength="8">
</td></tr>
<tr><td class="leftt">邮箱：
<input type="email" class="rightt">
</td></tr>
<tr><td class="leftt">手机：
<input type="tel" class="rightt">
</td></tr>
<tr><td class="leftt">设置密码：
<input type="password" size="10" class="rightt">
</td></tr>
<tr><td class="leftt">确认密码：
<input type="password" size="10" class="rightt">
</td></tr>
</table>
</form>
</div>
<div class="top">
宠物信息
</div>
<div class="biao">
<form action="#" method="post">
<table class="table">
<tr><td class="leftt">所属种类：
<select>
<option>-请选择-</option>
<option>猫</option>
<option>狗</option>
</select>
</td></tr>
<tr><td class="leftt">性别：
<input type="radio" name="sex" id="man">
<label for="man">男</label>
<input type="radio" name="sex" checked id="woman">
<label for="woman">女</label>
</td></tr>
<br>
<tr><td class="leftt">年龄：
<select>
<option>-请选择-</option>
<option>一年以下</option>
<option>一年以上</option>
</select>
</td></tr>
<br>
<tr><td class="leftt">喜爱的食物：
<input type="checkbox">面食
<input type="checkbox">青草
<input type="checkbox">肉类
<input type="checkbox">杂粮
<input type="checkbox">水果
<input type="checkbox">蔬菜
</td></tr>
<br>
<tr><td class="leftt">备注：
<textarea cols="100" rows="5" placeholder="请填写备注内容" class="rightt">
</textarea>
</td></tr>
<tr>
<td colspan="2">
<input type="button" value="完成注册" class="zhuc" />
</td>
</table>
</form>
</div>
</div>
</div>
<!--内容模块结束-->
<!--版权信息模块开始-->
<div id="four">
<p>Copyright @ 2020-2030 LIANcom, ALL rights reserved.</p>
<p>2020-2030, 版权所有 萌宠俱乐部 85CP备13385453</p>
</div>
<!--版权信息模块结束-->
</body>
</html>
宠物网站CSS：
@charset "utf-8";
/* CSS Document */
body{
font-family:"微软雅黑";
font-size:16px;
margin:0 auto;
}
#one{
width:100%;
margin:0 auto;
height: 86px;
background: url(../images/top.jpg) repeat-x;
padding:0;
}
#one.toubu{
background-color: #f2f2f2;
margin:0 auto;
width:100%;
position:relative;
}
.left{
margin:0 auto;
position:absolute;
left: 450px;
top:5px;
}
.right{
position:absolute;
right:550px;
top:15px;
}
#daohang{
width:900px;
height:74px;
margin:0 auto;
padding-left: 80px;
background: url(../images/navbg.png) no-repeat;
}
#daohang dh{
text-align:center;
width:980px;
margin:0 auto;
}
#daohang li{
list-style: none;
float: left;
line-height: 45px;
width:100px;
height:48px;
text-align: center;
}
#daohang ul li a{
text-decoration: none;
display: block;
width:100px;
height:48px;
color:#fff;
}
#daohang ul li:hover{
background:url(../images/pic03.png) no-repeat;
}
#two{
width:980px;
margin:0 auto;
}
#three{
width:980px;
margin:0 auto;
}
.biao{
width:980px;
height:485px;
margin:0 auto;
background:#f5f5f5;
}
.top{
width:945px;
height:26px;
padding:5px 0 0 35px;
color:#edf7d8;
background: url(../images/pic01.jpg) no-repeat;
}
.table{
padding:50px 0 45px 250px;
}
td{
height:50px;
color:#89b52a;
}
#three biao tr{
height:10px;
width:315px;
}
.leftt{
width:120px;
text-align:left;
}
.rightt{
width:310px;
height:28px;
padding-left: 10px;
border:1px solid #89b52a;
}
input{vertical-align:middle;}
select{
width:168px;
border:1px solid #89b52a;
color:#89b52a;
}
textarea{
width:380px;
border:1px solid #89b52a;
height:150px;
resize:none;
font-size:12px;
color:#ccc;
padding:20px;
}
.zhuce{
border: none;
margin-top: 40px;
width:175px;
text-align:center;
margin-top:0 auto;
margin:0 auto;
height:30px;
color:#FFF;
font-size:20px;
font-family:"简约";
background:url(../images/pic02.png);
}
#four{
width:100%;
margin:0 auto;
text-align:center;
height:65px;
background:#ccc;
font-family:"简约";
font-size:10px;
}
.zhuc{
width:408px;
height:76px;
background:url(../images/pic02.png) center center no-repeat;
color:#fff;
text-align:center;
margin-top: 40px;
margin:0 auto;
font-size:20px;
font-family:"简约";
border:none;
}
博客
博客：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>博客</title>
</head>
<body>
<div style="width:980px; margin:0 auto;background:#FFF">
<!--头部模块 开始-->
<div>
<div style="height:56px" align="center">
<img src="images/logo.png" alt="图标" align="left">
<p align="right">我的博客 | 攻略 | 随笔</p>
</div>
<hr color="#CCCCCC"/>
</div>
<!--头部模块 结束-->
<!--博主简介模块 开始-->
<div style="height:470px">
<img src="images/banner1.jpg" alt="博主简介" align="left" hspace="12" vspace="12">
<div>
<p align="center">
<strong><font size="7" color="#0878FF">博主</font><font size="7" color="#333">简介</font></strong>
</p>
<p> 大家好，我是你们的旅行博主————<font color="#0878FF">LonelySton</font>。本人是一名资深旅行博主，外向型的内向人格，对世界的好奇心随年龄有增无减。同时是音乐、电影、旅行、文学、篮球、长跑、潜水爱好者。想在老去之前，看遍这颗星球的美好。</p>
<p> 旅行格言格言：<font color="#0878FF"><strong><em><ins>人生不过一场旅行</ins></em></strong></font>，你路过我,我路过你,然后各自回头,敬往事一杯烈酒。比起说走就走的旅行,很多人的生活都是日渐趋于平淡的怅然,缺少了一种享受生活的阳光悠然。</p>
<p> 旅行足迹：在纳米比亚的死亡谷、土耳其卡帕多奇亚、日本镰仓、马达加斯加。<font color="#f90"><strong><ins>......[详细]</ins></strong></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="#CCCCCC">
<p> 在这浩瀚的大漠我看到了姿态各异、生命力极强的胡杨。没有肥沃的土壤、没有充足的水分、没有适宜的环境，面对着寸草不生的塔克拉玛干大沙漠，却有胡杨毅然傲立戈壁，呈现出生命醉人的绿。</p>
<img src="images/banner2.jpg" alt="沙漠" vspace="20"/>
<p> 据说，守护在戈壁的胡杨，一千年不死，一千年不倒，一千年不朽，这种傲然挺立、不屈不挠的精神，深深震动了我，这正像生活在大漠边缘勤劳勇敢的人们。喜欢摄影的我，想努力用自己的视角体会这种精神。</p>
<img src="images/banner3.jpg" alt="沙漠" vspace="20"/>
</div>
<!-- 旅游随笔模块 结束-->
<!--驴友评论模板 开始-->
<div>
<div><img src="images/icon.gif"</div>
<hr color="#CCCCCC"/>
<img src="images/person1.jpg" align="left" hspace="10"/>
<div>
<p>
<font color="#f60">HXZ9_IT</font> <font size="2" color="#999">2020-1-2 15:38:37</font>
</p>
</div>
<div><p><font size="2">风景太美了，感谢博主的分享，有时间一定去看看！</font><br></p></div>
<hr color="#CCCCCC" size="1"/>
<img src="images/person2.jpg" align="left" hspace="10"/>
<div><p><font color="#f60">外星人</font> <font size="2" color="#999">2020-1-15 15:05:37</font></p></div>
<div><p><font size="2">大漠孤烟直，长河落日圆</font><br></p></div>
<hr color="#CCCCCC" size="1"/>
<img src="images/person3.jpg" align="left" hspace="10"/>
<div><p><font color="#f60">so_cool</font> <font size="2" color="#999">2020-2-14 10:38:36</font></p></div>
<div><p><font size="2">前几年去过一次，风景可以，适合拍照。</font><br></p></div>
<hr color="#CCCCCC" />
</div>
<!--驴友评论模板 结束-->
<!--页脚模板 开始-->
<div style="text-align:center;">
<P><font color="1d5983" size="2">网友意见留言板</font> <font size="2">电话：000-1234567</font> <font color="1d5983" size="2">欢迎批评指正</font></P>
<p><font color="1d5983" size="2">博客简介 | Abou BOKE | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | BOKE English | 注册 | 产品答疑</font> </p>
<p><font color="1d5983" size="2">Copyright © 2016 - 2026 BOKE.coright All Rights Reserved</font></p>
</div>
<!--页脚模板 结束-->
</div>
</body>
</html>
插件
表单：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" href="CSS/biaoge.css" type="text/css" />
</head>
<body>
<form action="#" method="post" name="a">
<label>
用户名：<input type="text" maxlength="6" value="李明"></label>
<br><br>
密码：<input type="password" size="10"><br><br>
性别：<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" checked id="woman"><label for="woman">女</label>
<br><br>
爱好特长：
<input type="checkbox">唱歌
<input type="checkbox">画画
<input type="checkbox">舞蹈
<br><br>
上传文件：
<input type="file">
<br>
<textarea cols="100" rows="5">请将您的意见反馈给我们，我们会及时处理</textarea>
<br>
<select>
<option>高中</option>
<option>初中</option>
<option>大学</option>
</select>
<br>
<input>
<input>
<input>
<input type="button" value="普通按钮">
<input type="submit">
<input type="reset">
<br>
<br>
电子邮箱：<input type="email" ><br>
联系电话：<input type="tel" patterm="^\d{11}$"><br>
提交网址：<input type="url "><br>
请输入搜索关键词：<input type="search" ><br>
设置颜色：<input type="color" ><br>
请提交数值：<input type="number" value="2" max="10" step="2"><br>
滑动选择数值：<input type="range" ><br>
选择时间日期：<br>
年、月、日：<input type="date">
年、月：<input type="month">
年、周：<input type="week">
小时、分钟： <input type="time">
世界标准时间：<input type="datetime">
本地时间：<input type="datetime-local"><br>
请输入搜索关键词：<input type="text" autofocus autocomplete="off">
<input type="submit" value="提交">
</form>
<form action="#" method="get" id="one">
请输入名字：<input type="text" name="oo">
<input type="submit" value="提交">
<br>
请输入网址：<input type="url" list="url1" name="weburl">
<datalist id="url_list">
<option label="百度" value="http://www.baidu.com"></option>
<option label="QQ" value="http://www.qq.com"></option>
<br>
</datalist>
<br>
请输入邮编：<input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入六位邮编">
<input type="submit" value="提交">
<div>
<img src="images/images/pic03.png">
<p><input type="text" maxlength="6"></p>
<p><input type="password" size="20"></p>
<input type="button" value="注册">
<input type="button" value="登录">
</div>
</form>
请输入昵称：<input type="text" name="ss" form="one">
</body>
</html>
表单例子：
<!DOCTYPE html >
<html >
<head>
<meta charset=utf-8 />
<title>的萌宠</title>
<link href="css/style06.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--head begin-->
<div id="one">
<div class="head"><img src="images/logo.png" width="187" / ><span class="logo"><img src="images/pic04.png" height="45"/></span></div>
<div class="logo"></div>
<div id="dh">
<p> </p>
<p><a href="#">首页</a><a href="#"> 萌宠领养</a><a href="#"> 萌宠医院 </a><a href="#">萌宠食品</a><a href="#"> 萌宠资讯</a><a href="#"> 注册会员</a></p>
</div>
<br/>
<br/>
<br/>
</div>
<br/><br/><br/><br/><br/>
<div id="nav"><img src="images/banner.jpg" width="980" height="330" />
</div>
<!--nav end-->
<!--banner begin-->
<div id="two">
<h2 class="step">会员注册</h2>
<form action="#" method="post" class="three">
<table class="content">
<tr>
<td class="left">昵称：<input type="text"></td>
<td class="left">邮箱：<input type="email" maxlength="10"></td
><td class="left">手机：<input type="tel" pattern="^\d{11}$"></td>
<form action="#" method="post" class="three" />
<td class="">
</tr>
<!--banner end-->
</body>
</html>
40
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
