一、请假条
<html>
<head>
<meta charset="UTF-8">
<title>请假条</title>
</head>
<body>
<center>
<h1>请假条</h1>
<table border="1" cellspacing="0px" cellpadding="0px" width="500px">
<tr height="40px">
<td width="15%">学校</td>
<td width="20%"> </td>
<td width="10%">班级</td>
<td colspan="2" width="20%"> 年 班 </td>
<td width="15%" colspan="1">姓名</td>
<td colspan="2"> </td>
</tr>
<tr height="60px">
<td colspan="">请假时间</td>
<td colspan="4">年月日</td>
<td colspan="">联系方式</td>
<td> </td>
</tr>
<tr height="120px">
<td>请假事由及去向</td>
<td colspan="7"> </td>
</tr>
</table>
</center>
</body>
</html>二、用户注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
</head>
<body>
<table border="0" cellspacing="" cellpadding="3px" width="700px">
<tr>
<td align="right">* 用户名:</td>
<td><input type="text" name="username" placeholder="用户名设置成功后不可修改"/></td>
<td>6-30位字母、数字、“_”,字母开头</td>
</tr>
<tr>
<td align="right">*登录密码:</td>
<td><input type="password" name="password" placeholder="6-20位字母、数字或符号"/></td>
<td>
<table border="0" cellspacing="" cellpadding="" width="90px">
<tr><td bgcolor="red"></td><td bgcolor="red"></td><td bgcolor="grey"></td></tr>
</table>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td><input type="password" name="password" placeholder="再次输入您的登录密码"/></td>
<td></td>
</tr>
<tr>
<td align="right">*证件类型:</td>
<td><select >
<option selected>中国居民身份证</option><br />
<option >外国人永久居留身份证</option><br />
<option >港澳台居民身份证</option><br />
</select></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="radio" name="ID" />中国居民身份证<br />
<input type="radio" name="ID1" />外国人永久居留身份证<br />
<input type="radio" name="ID2" />港澳台居民身份证
</td>
<td></td>
</tr>
<tr>
<td align="right">*姓名:</td>
<td><input type="text" /></td>
<td></td>
</tr>
<tr>
<td align="right">*证件号码::</td>
<td><input type="text" /></td>
<td></td>
</tr>
<tr>
<td align="right">*邮箱:</td>
<td><input type="email" /></td>
<td></td>
</tr>
<tr>
<td align="right">*手机号码:</td>
<td><input type="number" /</td>
<td></td>
</tr>
<tr>
<td align="right">*类型:</td>
<td>
<select >
<option>成人</option>
<option>儿童</option>
</select>
</td>
<td></td>
</tr>
</table>
</body>
</html>
<!--
作者：offline
时间：2022-05-15
描述：表格和表单融合小练习
1.建立表格，划分行列
2.在行列里进行操作
-->三、伪类
<html>
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
img{
width: 200px;
}
img:hover{/*鼠标移到上面,图片放大两倍,变成小手指*/
width: 400px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="img/1.jpg"/>
</body>
</html>四、计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
table{
width: 400px;
border-collapse: collapse;/**/
}
td{
width: 25%;
height: 30px;
text-align: center;
}
*{
font-size: 24px;
}
/*[type="number"]{
max-width: 300px;
}*/
input{
width: 340px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10px">
<tr>
<td colspan="4" ><input type="number" /></td>
</tr>
<tr>
<td >C</td>
<td ><-</td>
<td >/</td>
<td >x</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>+</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td >3</td>
<td rowspan="2">=</td>
</tr>
<tr>
<td>√</td>
<td>0</td>
<td>.</td>
</tr>
</table>
</body>
</html>
五、小界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小界面</title>
<style type="text/css">
ul{
list-style: none;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div style="width: 100%;height: 1000px;background-color: papayawhip;">
<div style="width: 100%;height: 150px;background-color: black;"></div>
<div style="width: 100%;height: 850px;background-color: purple;">
<div style="width: 20%;height: 850px;background-color: ghostwhite;float: left;">
<ul>
<li>
<a href="demo_01.html" target="content">首页1</a>
</li>
</ul>
</div>
<div style="width: 80%;height: 850px;background-color: white;float: right;">
<iframe name="content" width="100%" height="100%"></iframe>
</div>
</div>
</div>
</body>
</html>
六、外边距的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距的小例子</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: pink;
margin: auto;/*div居中,前提是要知道div的大小宽度,左右能够固定（设为自动）就行，上面可以自由选择margin：50px auto是指上面50px，左右自动*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七、菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
ul{
width: 50%;
list-style: none;/*去掉小圆圈*/
}
a{
float: left;
text-decoration: none;
background-color: palegreen;
width: 100px;
padding:10px;
text-align: center;
color: white;
border-right: solid white 2px;
/**/
}
a:hover{
background-color: white;
color: black;
/**/
}
</style>
</head>
<body>
<ul>
<li><a href="#" target="">篮球</a></li>
<li><a href="#">足球</a></li>
</ul>
</body>
</html>
八、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="post">
<!--required表示必填-->
<input type="text" name="username" required/><br />
<input type="password" name="password" /><br />
<input type="radio" name="gender" value="m" />男<br />
<!--checked表示选定/默认-->
<input type="radio" name="gender" value="f" checked="checked"/>女<br />
<input type="checkbox" name="habit" id="habit" value="bb" />篮球<br />
<input type="checkbox" name="habit" id="habit" value="fb" />足球<br />
<textarea rows="10" cols="50">这是大的文本框</textarea><br />
<!--下拉框-->
<select name="province">
<option value="fujian">福建</option>
<option value="guangdong"> 广东</option>
<option value="guangxi">广西</option>
</select><br />
<input type="number" name="mobile" /><br />
<input type="file" name="picture" /><br />
<input type="color" name="color" /><br />
<input type="email" name="email" /><br />
<input type="submit" value="保存" /><br />
<input type="date" />
</form>
</body>
</html>
<!--
radio表示单选
checkbox表示多选
required表示必填
checked表示选定/默认
selec-option表示下拉框
textarea表示文本框
number表示只能输入数字
file表示添加文件
email表示邮箱
color表示颜色
date表示时间
-->九、选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--
<style type="text/css">
p{
color: red;/*标签选择器，不常用*/
}
#p2{
color: pink;/*id选择器，id唯一,前面要加#*/
}
.pclass{
color: black;/*类选择器，可多个类，最好用,类和类之间用空格隔开，前面加.*/
}
text-align: center;
}
</style>
-->
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<p>一二三四五</p>
<p id="p2">上山打老虎</p>
<p class="pclass center">老虎打不着</p><!--类和类之间用空格隔开-->
<p>空间小松鼠</p>
<p>一给<strong>我里<em>giao</em></strong></p>
<p>黑<span class="importcontent">火</span>凤凰</p>
<p>好的<em>你好</em></p>
<em>oknice</em>
</body>
</html>
<!--
作者：offline
时间：2022-05-15
描述：em表示em位置的文本变化同时变成斜体,后代选择器
strong表示加粗
span
p>em，p后面跟着em马上改变（颜色）
-->十、与字体有关的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>与字体有关的样式</title>
<style type="text/css">
p{
font-family: "微软雅黑";/*字体类型*/
font-size: 30px;/*字体大小*/
font-style: italic;/*字体是否倾斜*/
font-weight: 900;/*加粗*/
/*font:italic "gill sans ultra bold condensed"6px "楷体"*//*一次性写*/
}
</style>
</head>
<body>
<p>Helloween</p>
</body>
</html>
十一、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="background-color: red;float: right;" >1</div>
<!--
作者：offline
时间：2022-05-15
描述：float: right;让1向右浮动，2上面没有东西，所以2，3往上
-->
<div style="background-color: green;float: left;" >2</div>
<div style="background-color: palegoldenrod;" >3</div><!-- 3藏在2下面，因为2是浮动的，所以3的div跑上去了，但元素不会跟着对应div一起挤 -->
</body>
</html>
<!--
作者：offline
时间：2022-05-15
描述：把纵向排布的东西变成横向排布的
-->十二、管理端主界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理端主界面</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<!--<div class="row">表示一行里</div>-->
<!--第一行-->
<div class="row">
<div class="col-md-12 col-sm-12">
<!--这是个啥？？？？？？？-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--标题？？？-->
<div class="navbar-header">
<a class="navbar-brand" href="#" style="font-size: 24px;line-height: 20px;">合家欢</a>
<!--描述：搜索-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--描述：消息提示 -->
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
</div>
</div>
</nav>
</div>
</div>
<!--第二行-->
<div class="row">
<!--左边那块-->
<div class="col-md-2" style="height: 500px;">
<!--描述：导航条纵向 ，nav-stacked表示纵向-->
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">
<a href="index.html" target="content">首页</a>
</li>
<li role="presentation">
<a href="表格.html" target="content">商品管理</a>
</li>
<li role="presentation">
<a href="图片.html" target="content">用户管理</a>
</li>
</li>
<li role="presentation">
<a href="图标.html "target="content">退出系统</a>
</li>
</ul>
</div>
<!--右边那块-->
<div class="col-md-10" style="height: 500px;">
<!--显示内容区域-->
<iframe src="index.html" width="100%" height="100%" frameborder="0" name="content"></iframe>
</div>
</div>
<!--第三行（底部）-->
<div class="row">
<div class="col-md-12 col-sm-12" style="background-color: pink;height: 50px;"></div>
</div>
</div>
</body>
</html>十三、可以根据手机大小来做到自适应大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可以根据手机大小来做到自适应大小</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!--
作者：offline
时间：2022-05-22
描述：container-fluid全充满
-->
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12">
<img src="img/1.jpg" style="width:100%";height:alt="300px;" >
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 text-center"><img src="img/1.jpg" ></div>
<div class="col-md-6 col-sm-12 text-center"><img src="img/1.jpg" ></div>
</div>
</div>
</body>
</html>
十四、格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>格式</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1>ewewew <small>121212</small></h1>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<pre>1212112</pre>
</div>
</body>
</html>
<!--
作者：offline
时间：2022-05-22
描述：bs中css样式https://v3.bootcss.com/css/(bootstrap网站，选全局样式)
p段落之间有10px距离
mark标签----高光
del标签画了条线，被删除的文本
s标签----无用的文本
ins标签-----插入文本，底部划横线
u标签-----带下划线的文本
small标签----小号文本
strong标签---加粗
em标签----斜体
text-left类 ----左对齐
blockquote标签-----引用
kbd标签---按键
pre标签---代码形式
-->十五、BootStrap小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap小例子</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<style type="text/css">
table {
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<!--
作者：offline
时间：2022-05-22
描述：路径导航
-->
<ol class="breadcrumb">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">商品管理</a>
</li>
<li class="active">所有商品</li>
</ol>
<!--
作者：offline
时间：2022-05-22
描述：页头
-->
<div class="page-header">
<h1>口袋妖怪管理系统 <small> 所有妖怪玩具</small></h1>
</div>
<p>
<a href="#" class="btn btn-success">新增</a>
</p>
<table class="table table-hover">
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4">名称</th>
<th class="col-md-4">价格</th>
<th class="col-md-3"></th>
</tr>
<tr>
<td>1</td>
<td>可达鸭</td>
<td>32</td>
<td class="text-center">
<a href="#" class="btn btn-warning">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>皮卡丘水壶</td>
<td>32</td>
<td class="text-center">
<a href="#" class="btn btn-warning">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>皮卡丘八音盒</td>
<td>32</td>
<td class="text-center">
<a href="#" class="btn btn-warning">编辑</a>
<a href="#" class="btn btn-danger">删除</a>
</td>
</tr>
</table>
<nav aria-label="...">
<ul class="pager">
<li>
<a href="#">第一页</a>
</li>
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">下一页</a>
</li>
<li>
<a href="#">后后一页</a>
</li>
</ul>
</nav>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">商品管理系统</h4>
</div>
<div class="modal-body">
确认是否要删除？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">删除 </button>
</div>
</div>
</div>
</div>
</body>
</html>
<!--
作者：offline
时间：2022-05-22
描述：bs最好放在一个容器里
-->十六、按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<div class="container">
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-info">信息</button>
<button class="btn btn-danger">危险</button>
<a href="#" class="btn btn-success">超链接</a>
<button class="btn btn-link">按钮</button>
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-primary btn-sm">小按钮</button>
<button class="btn btn-primary disabled="disabled>禁用</button>
<button class="btn btn-close">×</button>
</div>
</body>
</html>
十七、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</body>
</html>十八、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table">
<tr>
<th class="col-md-1">#</th>
<th class="col-md-5">名称</th>
<th class="col-md-4">价格</th>
</tr>
<tr>
<td>1</td>
<td>可达鸭</td>
<td>32</td>
</tr>
<tr>
<td>2</td>
<td>皮卡丘水壶</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>皮卡丘八音盒</td>
<td>32</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-striped">
<tr>
<th>#</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr>
<td>1</td>
<td>可达鸭</td>
<td>32</td>
</tr>
<tr>
<td>2</td>
<td>皮卡丘水壶</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>皮卡丘八音盒</td>
<td>32</td>
</tr>
</table>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table table-bordered">
<tr>
<th>#</th>
<th>名称</th>
<th>价格</th>
</tr>
<tr class="danger">
<td>1</td>
<td>可达鸭</td>
<td>32</td>
</tr>
<tr class="info">
<td>2</td>
<td>皮卡丘水壶</td>
<td>32</td>
</tr>
<tr class="success">
<td>3</td>
<td>皮卡丘八音盒</td>
<td>32</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>十九、模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
//jq包导进来
<script src="j" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/bootstrap.js">
function onModel(){
}
</script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button class="btn btn-primary btn-lg" onclick="onModel()">手动</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">商品管理系统</h4>
</div>
<div class="modal-body">
确认是否要删除？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">删除 </button>
</div>
</div>
</div>
</div>
</body>
</html>二十、图标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>icon</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css">
* {
font-size: 36px;
color: palegreen;
}
</style>
</head>
<body>
<i class="glyphicon glyphicon-asterisk"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-apple"></i>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<!--
作者：offline
时间：2022-05-22
描述：按钮组
-->
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</body>
</html>二十一、图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css">
img{
width: 140px;
height: 140px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/1.jpg" alt="..." class="img-rounded">
<img src="img/1.jpg" alt="..." class="img-circle">
<img src="img/1.jpg" alt="..." class="img-thumbnail">
</div>
</body>
</html>
二十二、栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!--container-fluid,栅格系统12个格子，col-md----电脑端看？
col-sm-----手机端看？
col-sm-offset-2------空两格
-->
<div class="container" style="background-color: pink;">
<div class="row">
<div class="col-md-6 col-sm-12"style="height: 300px;background-color: palegreen;">
<i class="glyphicon glyphicon-apple"></i>
</div>
<div class="col-md-6 col-sm-12"style="height: 300px;background-color: olive;"></div>
</div>
<div class="row">
<div class="col-md-12 col-sm-offset-2 col-sm-8"style="height: 300px;background-color: blueviolet;"></div>
</div>
</div>
</body>
</html>
二十三、js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
alert("你好");//弹窗
var str=prompt("请输入您的姓名：");//输入框
console.log(str);//在控制台显示出来
var isok=confirm("确认吗？");//确认框
if(isok){
alert(str+"你好！");
}
**/
function start(){
alert("你好");
var str=prompt("请输入您的姓名：");
console.log(str);
var isok=confirm("确认吗？");
if(isok){
alert(str+"你好！");
}
}
</script>
<!--可以将js放在js文件夹下-->
<script type="text/javascript" src="js/main.js">
</script>
</head>
<body>
<button onclick="start()">启动程序</button>
</body>
</html>
二十四、页面小练
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
#a1{
height: 100px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#a2{
/**有问题，图片怎么正常缩放参考第二行第一张图**/
height: 65px;
background-color: white;
background-image: url(img/logo.png);
background-repeat:no-repeat;
position: relative;/*相对位置*/
left: 10px;/*往右走70个像素,下走10个像素*/
top: 17px;
}
#a3{
height: 100px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#a4{
width: 800px;
height: 50px;
background-color: white;
position: relative;/*相对位置*/
right: 30px;/*往右走0个像素,下走15个像素*/
top: 20px;
}
ul{
list-style: none;/*去掉小圆圈*/
}
a{
float: left;
padding: 20px;
text-decoration: none;
text-align: center;
color: black;
font-weight: 700;
padding-left: 18px;
font-size: 16px;
}
a:hover{
color: limegreen;
text-decoration: none;
}
#b1{
height: 670px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#b2{
height: 670px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#b3{
height: 554px;
background-color: darkorange;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
top: 60px;
background-image: url(img/left-banner-image.jpg);
background-repeat:no-repeat;
background-size:100% 100%
}
#b4{
height: 263px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
top: 60px;
}
#b5{
height: 263px;
background-color: white;
position: relative;/*相对位置*/
right: 14px;/*往右走10个像素,下走20个像素*/
top: 60px;
}
#b6{
height: 263px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
top: 67px;
margin-top: 20px;
float: left;
}
#b7{
height: 263px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
top: 67px;
right: 14px;
margin-top: 20px;
}
#b8{
height: 100%;
background-color: darkorange;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/baner-right-image-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#b9{
height: 263px;
background-color: darkorange;
position: relative;/*相对位置*/
left: 15px;/*往右走10个像素,下走20个像素*/
background-image: url(img/baner-right-image-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
top: 0px;
}
#b10{
height:100%;
background-color: mediumpurple;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/baner-right-image-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#b11{
height:100%;
background-color: mediumpurple;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/baner-right-image-04.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#b12{
height: 60px;
background-color: none;
position: relative;/*相对位置*/
left: 60px;/*往右走10个像素,下走20个像素*/
top: 195px;
}
#b13{
height: 60px;
background-color: none;
position: relative;/*相对位置*/
left: 60px;/*往右走10个像素,下走20个像素*/
top: 220px;
}
#b14{
height: 60px;
background-color: none;
position: relative;/*相对位置*/
left: 30px;/*往右走10个像素,下走20个像素*/
top: 170px;
}
#b15{
height: 45px;
background-color: none;
position: relative;/*相对位置*/
left: 30px;/*往右走10个像素,下走20个像素*/
top: 50px;
border: solid 1px;
border-color: white;
text-align: center;
}
#text_1{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: white;
}
#b16{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
left: 80px;/*往右走10个像素,下走20个像素*/
top: 83px;
}
#text_2{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: white;
font-weight: 600;
font-size: 26px;
}
#bb16{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
left: 95px;/*往右走10个像素,下走20个像素*/
top: 83px;
}
#bbb16{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
left: 100px;/*往右走10个像素,下走20个像素*/
top: 83px;
}
#bd16{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
left: 50px;/*往右走10个像素,下走20个像素*/
top: 83px;
}
#b17{
height: 40px;
background-color: none;
position: relative;/*相对位置*/
left: 35px;/*往右走10个像素,下走20个像素*/
top: 100px;
}
#bb17{
height: 40px;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
top: 100px;
}
#bbb17{
height: 40px;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
top: 100px;
}
#bd17{
height: 40px;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
top: 100px;
}
#text_3{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: white;
font-weight: 00;
font-size: 16px;
font-style: italic;
}
#c1{
height: 180px;
background-color: white;
}
#c2{
height: 600px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#c4{
height: 154px;
background-color: white;
position: relative;/*相对位置*/
left: 100px;/*往右走10个像素,下走20个像素*/
top: 40px;
}
#c5{
height: 80px;
background-color: white;
position: relative;/*相对位置*/
left: 5px;/*往右走10个像素,下走20个像素*/
top: 40px;
float: left;
}
#text_4{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
font-weight: 800;
font-size: 34px;
}
#c6{
height: 50px;
background-color: white;
position: relative;/*相对位置*/
left: 5px;/*往右走10个像素,下走20个像素*/
top: 9px;
float: left;
}
#text_5{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #A1A1A1;
font-style: italic;
font-family: sans-serif;
font-size: 14px;
font-weight: 200;
}
#c7{
height: 500px;
background-color: none;
position: relative;/*相对位置*/
left: 110px;/*往右走10个像素,下走20个像素*/
bottom: 10px;
}
#c8{
height: 460px;
background-color: none;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
}
#c9{
height: 400px;
background-color: white;
position: relative;/*相对位置*/
right: 5px;/*往右走10个像素,下走20个像素*/
}
#c10{
height: 400px;
background-color: white;
position: relative;/*相对位置*/
right: 10px;/*往右走10个像素,下走20个像素*/
}
#c11{
height: 368px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/men-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#l1{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#s1{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#c12{
height:30%;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
}
#c13{
width: 250px;
height:50px;
background-color: white;
position: relative;/*相对位置*/
right: 38px;/*往右走10个像素,下走20个像素*/
top: 20px;
padding-left:20px;
}
#c14{
height:35px;
background-color: white;
position: relative;/*相对位置*/
right: 35px;/*往右走10个像素,下走20个像素*/
bottom: 25px;
}
#c15{
height:35px;
background-color: none;
position: relative;/*相对位置*/
/*往右走10个像素,下走20个像素*/
bottom: 10px;
padding-left:20px;
left: 200px;
}
#text_6{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #2A2A2A;
font-family: sans-serif;
font-weight: 700;
font-size: 22px;
}
* {
font-size: 15px;
font-weight: 300;
}
#text_7{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #A1A1A1;
font-weight: 700;
font-size: 20px;
}
#c16{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/men-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#l2{
height: 368px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#s2{
height: 368px;
background-color: white;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#c17{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/men-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#l3{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#s3{
height: 368px;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#d1{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#d2{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#d3{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/women-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#cc1{
height: 60px;
background-color: white;
position: relative;/*相对位置*/
left: 140px;/*往右走10个像素,下走20个像素*/
top:150px;
}
#cc2{
width: 50px;
height: 50px;
background-color: white;
background-image: url(img/prev.png);
background-repeat:no-repeat;
text-align: center;
position: relative;/*相对位置*/
left: 40px;/*往右走10个像素,下走20个像素*/
top:200px;
border: solid 1px;
border-color: black;
background-size:50% 50%;
background-position-x: 5px;
background-position-y: center;
}
#cc4{
width: 50px;
height:50px;
background-color: white;
background-image: url(img/next.png);
background-repeat:no-repeat;
text-align: center;
position: relative;/*相对位置*/
right: 30px;/*往右走10个像素,下走20个像素*/
top:10px;
border: solid 1px;
border-color: black;
background-size:50% 50%;
background-position-x: 12px;
background-position-y: center;
}
#e1{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#e2{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#e3{
height: 70%;
background-color: cornflowerblue;
position: relative;/*相对位置*/
left: 0px;/*往右走10个像素,下走20个像素*/
background-image: url(img/kid-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#f1{
height: 30px;
background-color: white;
}
#f2{
height: 100%;
background-color: white;
}
#f3{
height: 100%;
background-color: white;
}
#f4{
height: 50px;
background-color: white;
position: relative;/*相对位置*/
right: 10px;
}
#f5{
width: 600px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 20px;
right: 10px;
/*往右走10个像素,下走20个像素*/
/**margin-left: -15px;
margin-right: -15px;
padding-right: -10px;**/
}
#f6{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 10px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f7{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 40px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f8{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 35px;/*往右走10个像素,下走20个像素*/
}
#f9{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 22px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#text1{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-weight: 900;
font-size: 30px;
}
#text2{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #AAAAAA;
font-family: sans-serif
font-size:1px;
}
#f10{
height: 50px;
background-color: palegreen;
background-image: url(img/111.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
position: relative;/*相对位置*/
top: 5px;/*往右走10个像素,下走20个像素*/
}
#f11{
width: 450px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 55px;/*往右走10个像素,下走20个像素*/
left: 30px;
}
#text3{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-weight: 400;
font-size:20px;
}
#text4{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #2A2A2A;
font-size:15px;
font-weight: 500;
}
#f12{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 50px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f13{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 77px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f14{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 80px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f15{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 108px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#f16{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 135px;/*往右走10个像素,下走20个像素*/
right: 10px;
}
#cc5{
height: 630px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#cc7{
height: 570px;
background-color: white;
position: relative;/*相对位置*/
left: 100px;/*往右走10个像素,下走20个像素*/
top: 50px;
}
#f17{
width: 150px;
height:40px;
text-align: center;
background-color: none;
border: solid 1px;
border-color: black;
position: relative;/*相对位置*/
right: 10px;/*往右走10个像素,下走20个像素*/
bottom: 20px;
}
#f18{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom: 100px;/*往右走10个像素,下走20个像素*/
}
#g1{
width: 600px;
height: 50%;
background-color: none;
}
#g2{
height: 50%;
background-color: plum;
}
#g3{
width: 250px;
height: 250px;
background-color: #F8F8F8;
}
#g4{
width: 270px;
height: 250px;
background-color: white;
background-image: url(img/explore-image-01.jpg);
background-repeat: no-repeat;
background-size:110% 100%;
background-position-x: 12px;
background-position-y: center;
position: relative;/*相对位置*/
left: 10px;/*往右走10个像素,下走20个像素*/
}
#g5{
height: 70px;
background-color: none;
position: relative;/*相对位置*/
top: 70px;/*往右走10个像素,下走20个像素*/
left: 10px;
}
#g6{
height: 70px;
background-color: none;
position: relative;/*相对位置*/
top:40px;/*往右走10个像素,下走20个像素*/
left: 30px;
}
#text5{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-size:25px;
font-weight: 600;
}
#text6{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #AAAAAA;
font-size:14px;
}
#g7{
height: 50%;
background-color: peachpuff;
}
#g8{
width: 250px;
height: 250px;
background-color: #F8F8F8;
}
#g9{
width: 270px;
height: 250px;
background-color: white;
background-image: url(img/explore-image-02.jpg);
background-repeat: no-repeat;
background-size:110% 100%;
background-position-x: 12px;
background-position-y: center;
position: relative;/*相对位置*/
right: 10px;/*往右走10个像素,下走20个像素*/
}
#h1{
height: 450px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#h2{
width: 1140px;
height: 200px;
background-color: none;
position: relative;/*相对位置*/
top: 90px;/*往右走10个像素,下走20个像素*/
}
#h3{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
left: 10px;/*往右走10个像素,下走20个像素*/
top: 50px;
}
#h4{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 48px;/*往右走10个像素,下走20个像素*/
left: 10px;
}
#text7{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-size:34px;
font-weight: 900;
}
#text8{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: darkgrey;
font-size:14px;
}
#h5{
width: 185px;
height: 185px;
background-color: palevioletred;
background-image: url(img/instagram-01.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#h6{
width: 185px;
height: 185px;
background-color: pink;
background-image: url(img/instagram-02.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#h7{
width: 185px;
height: 185px;
background-color: palevioletred;
background-image: url(img/instagram-03.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#h8{
width: 185px;
height: 185px;
background-color: pink;
background-image: url(img/instagram-04.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#h9{
width: 185px;
height: 185px;
background-color: palevioletred;
background-image: url(img/instagram-05.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#h10{
width: 185px;
height: 185px;
background-color: pink;
background-image: url(img/instagram-06.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#i1{
height: 400px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#i2{
height: 400px;
background-color: white;
border-bottom: 3px dotted #eee;
}
#i3{
width: 900px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 55px;/*往右走10个像素,下走20个像素*/
}
#i4{
width: 900px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 57px;/*往右走10个像素,下走20个像素*/
}
#i5{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 60px;/*往右走10个像素,下走20个像素*/
}
#i6{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 70px;/*往右走10个像素,下走20个像素*/
}
#t1{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-size:34px;
font-weight: 600;
}
#t2{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #A1A1A1;
font-size:14px;
font-family: sans-serif;
font-style: italic;
}
#i7{
height: 50px;
background-color: none;
border: solid 2px;
border-color: lightgrey;
text-align: center;
text-align: left;
margin-right: 40px;
}
#i8{
height: 50px;
background-color: none;
border: solid 2px;
text-align: center;
border-color: lightgrey;
text-align: left;
margin-right: 30px;
}
#i9{
height: 50px;
background-color: #212529;
background-image: url(img/222.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
#t3{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #A1A1A1;
font-size:14px;
font-style: italic;
}
#j1{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
}
#j2{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
}
#j4{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
bottom: 30px;
}
#j3{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
bottom: 30px;
}
#j5{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
bottom: 80px;
}
#j6{
height: 30%;
background-color: none;
position: relative;/*相对位置*/
left: 45px;/*往右走10个像素,下走20个像素*/
bottom: 80px;
}
#j7{
height: 300px;
background-color: #2A2A2A;
}
#j8{
width: 800px;
height: 300px;
background-color: #2A2A2A;
border-bottom: 1px solid #eee;
}
#j9{
height: 140px;
background-color: #2A2A2A;
}
#j10{
width: 800px;
height: 70px;
background-color: #2A2A2A;
position: relative;/*相对位置*/
left: 250px;/*往右走10个像素,下走20个像素*/
top: 30px;
}
#k1{
height: 280px;
background-color: #2A2A2A;
}
#k2{
height: 280px;
background-color: #2A2A2A;
}
#k3{
height: 280px;
background-color: #2A2A2A;
position: relative;/*相对位置*/
top: 0px;/*往右走10个像素,下走20个像素*/
left: 60px;
}
#k4{
height: 280px;
background-color: #2A2A2A;
position: relative;/*相对位置*/
top: 0px;/*往右走10个像素,下走20个像素*/
left: 80px;
}
#k5{
width: 200px;
height: 55px;
background-color: none;
background-image: url(img/white-logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
position: relative;/*相对位置*/
top: 58px;/*往右走10个像素,下走20个像素*/
right: 120px;
}
#k6{
width: 300px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 70px;/*往右走10个像素,下走20个像素*/
right: 137px;
}
#k7{
width: 200px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 50px;/*往右走10个像素,下走20个像素*/
right: 135px;
}
#k8{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 35px;/*往右走10个像素,下走20个像素*/
right: 135px;
}
#k9{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 20px;/*往右走10个像素,下走20个像素*/
right: 135px;
}
#u6{
width: 300px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 50px;/*往右走10个像素,下走20个像素*/
right: 80px;
}
#u7{
width: 200px;
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 40px;/*往右走10个像素,下走20个像素*/
right: 80px;
}
#u8{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top: 25px;/*往右走10个像素,下走20个像素*/
right: 80px;
}
#u9{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
top:10px;/*往右走10个像素,下走20个像素*/
right: 80px;
}
#u10{
height: 50px;
background-color: none;
position: relative;/*相对位置*/
bottom:10px;/*往右走10个像素,下走20个像素*/
right: 80px;
}
#p1{
height: 40px;
background-color: none;
position: relative;/*相对位置*/
top: 70px;/*往右走10个像素,下走20个像素*/
}
#p2{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
top: 50px;/*往右走10个像素,下走20个像素*/
}
#p3{
height: 30px;
background-color: none;
position: relative;/*相对位置*/
top: 40px;/*往右走10个像素,下走20个像素*/
}
#tt1{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: black;
font-size:16px;
font-weight: 600;
}
#tt2{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: #AAAAAA;
font-size:14px;
font-weight: 600;
}
#tt3{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: white;
font-size:14px;
font-weight: 0;
}
#tt4{
list-style: none;/*去掉小圆圈*/
padding-top: 10px;
color: white;
font-size:16px;
font-weight: 700;
}
#last{
width: 500px;
height: 80px;
background-color: #2A2A2A;
position: relative;/*相对位置*/
bottom:10px;/*往右走10个像素,下走20个像素*/
left: 530px;
background-image: url(img/333.png);
background-repeat:no-repeat;
background-size:50% 50%;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color: white;">
<!--第一行-->
<div class="row" >
<!--第一块-->
<div class=" col-md-5 col-sm-5" id="a1">
<div class="col-md-5 col-sm-offset-2 col-sm-2" id="a2"></div>
</div>
<!--第二块-->
<div class="col-md-7 col-sm-7" id="a3">
<div class="col-md-4 col-sm-5" id="a4">
<!--无序列表-->
<ul>
<li ><a href="#" style="color: grey;">Home</a></li>
<li><a href="#">Men's</a></li>
<li><a href="#">Women's</a></li>
<li><a href="#">Kid's</a></li>
<li><a href="#">Pages <small>∨</small></a></li>
<li><a href="#">Features <small>∨</small></a></li>
<li><a href="#">Explore</a></li>
</ul>
</div>
</div>
</div>
<!--第二行-->
<div class="row" style="background-color: blue;">
<!--第一块-->
<div class=" col-lg-6" id="b1">
<div class="col-md-12 col-sm-12" id="b3">
<!--<img src="img/left-banner-image.jpg" style="width:100%"height:alt="500px"; >-->
<div class="col-md-10" id="b12">
<i style="font-style: normal;font-size: 50px;font-weight: 700;color: white;" >We Are Hexashop</i>
</div>
<div class="col-md-9" id=b13>
<span style="font-style: italic; font-size: 17px;font-weight: 400; color: white;">Awesome,clean & creative HTML5 Template</span>
</div>
<div class="col-md-6" id="b14">
<div class="col-md-6"id="b15">
<li id="text_1">Purchase Now!</li>
</div>
</div>
</div>
</div>
<!--第二块-->
<div class=" col-md-6 col-sm-12" id="b2">
<div class="row" style="height: 264px;">
<!--第一小块-->
<div class=" col-md-6 col-sm-12" id="b4">
<div class="col-md-12 " id="b8">
<div class="col-md-6"id=b16>
<li id="text_2">Women</li>
</div>
<div class="col-md-10"id=b17>
<li id="text_3">Best Clothes For Women</li>
</div>
</div>
</div>
<!--第二小块-->
<div class=" col-md-6 col-sm-12" id="b5">
<div class="col-md-12 " id="b9">
<div class="col-md-6"id=bb16>
<li id="text_2">Men</li>
</div>
<div class="col-md-10"id=bb17>
<li id="text_3">Best Clothes For Men</li>
</div>
</div>
</div>
</div>
<div class="row" style="height: 264px;">
<!--第三小块-->
<div class=" col-md-6 col-sm-12" id="b6">
<div class="col-md-12 " id="b10">
<div class="col-md-6"id=bbb16>
<li id="text_2">Kids</li>
</div>
<div class="col-md-10"id=bbb17>
<li id="text_3">Best Clothes For Kids</li>
</div>
</div>
</div>
<!--第四小块-->
<div class=" col-md-6 col-sm-12" id="b7">
<div class="col-md-12 " id="b11">
<div class="col-md-6"id=bd16>
<li id="text_2">Accessories</li>
</div>
<div class="col-md-10"id=bd17>
<li id="text_3">Best Trend Accessories</li>
</div>
</div>
</div>
</div>
</div>
</div>
<!--第三行-->
<div class="row">
<div class="col-md-12"id="c1">
<div class="col-md-10"id="c4">
<div class="col-md-8"id="c5">
<li id="text_4">Men's Latest</li>
</div>
<div class="col-md-8"id="c6">
<li id="text_5">Details to details is what makes Hexashop different from the other themes.</li>
</div>
</div>
</div>
<div class="col-md-12"id="c2">
<div class="" id="cc2"></div>
<div class="col-md-10 "id="c7">
<div class="col-md-4"id="c8">
<div class="col-md-12"id="c11"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Classic Spring</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$120.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c9">
<div class="col-md-12"id="c16"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Air Force 1X</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$90.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c10">
<div class="col-md-12"id="c17"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Love Nana</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$150.00</li>
</div>
</div>
</div>
</div>
<div class="col-md-1" id="cc1">
<div class="" id="cc4"></div>
</div>
</div>
</div>
<!--第four行-->
<div class="row">
<div class="col-md-12"id="c1">
<div class="col-md-10"id="c4">
<div class="col-md-8"id="c5">
<li id="text_4">Women's Latest</li>
</div>
<div class="col-md-8"id="c6">
<li id="text_5">Details to details is what makes Hexashop different from the other themes.</li>
</div>
</div>
</div>
<div class="col-md-12"id="c2">
<div class="" id="cc2"></div>
<div class="col-md-10 "id="c7">
<div class="col-md-4"id="c8">
<div class="col-md-12"id="s1"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">New Green Jacket</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$75.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c9">
<div class="col-md-12"id="s2"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Classic Dress</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$45.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c10">
<div class="col-md-12"id="s3"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Spring Collection</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$130.00</li>
</div>
</div>
</div>
</div>
<div class="col-md-1" id="cc1">
<div class="" id="cc4"></div>
</div>
</div>
</div>
<!--第five行-->
<div class="row">
<div class="col-md-12"id="c1">
<div class="col-md-10"id="c4">
<div class="col-md-8"id="c5">
<li id="text_4">Kid's Latest</li>
</div>
<div class="col-md-8"id="c6">
<li id="text_5">Details to details is what makes Hexashop different from the other themes.</li>
</div>
</div>
</div>
<div class="col-md-12"id="c2">
<div class="" id="cc2"></div>
<div class="col-md-10 "id="c7">
<div class="col-md-4"id="c8">
<div class="col-md-12"id="l1"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">School Collection</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$80.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c9">
<div class="col-md-12"id="l2"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Summer Cap</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$12.00</li>
</div>
</div>
</div>
<div class="col-md-4"id="c10">
<div class="col-md-12"id="l3"></div>
<div class="col-md-12"id="c12">
<div class="col-md-7"id="c13">
<li id="text_6">Classic Kid</li>
</div>
<div class="col-md-8"id="c15">
<!--<i class="glyphicon glyphicon-star"></i>-->
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="col-md-8"id="c14">
<li id="text_7">$30.00</li>
</div>
</div>
</div>
</div>
<div class="col-md-1" id="cc1">
<div class="" id="cc4"></div>
</div>
</div>
</div>
<!--第六行-->
<div class="row ">
<div class="col-md-12"id="f1">
</div>
<div class="col-md-12"id="cc5">
<div class="col-md-10 "id="cc7">
<div class="col-md-6 " id="f2">
<div class="col-md-12"id="f4">
<li id="text1">Explore Our Products</li>
</div>
<div class="col-md-12"id="f5">
<li id="text2">You are allowed to use this HexaShop HTML CSS template.You can feel</li>
</div>
<div class="col-md-12"id="f6">
<li id="text2">free to modify or edit this layout.You can convert this template as any</li>
</div>
<div class="col-md-12"id="f7">
<li id="text2">kind of ecommerce CMS theme as you wish.</li>
</div>
<div class="col-md-12"id="f8">
<div class="col-md-1"id="f10">
</div>
<div class="col-md-11"id="f11">
<li id="text4">You are not allowed to redistribute this template ZIP file on any other website.</li>
</div>
</div>
<div class="col-md-12"id="f9">
<li id="text2">There are 5 pages included in this HexaShop Template and we are</li>
</div>
<div class="col-md-12"id="f12">
<li id="text2"> providing it to you for absolutely free of charge at our TemplateMo </li>
</div>
<div class="col-md-12"id="f13">
<li id="text2">website. There are web development costs for us.</li>
</div>
<div class="col-md-12"id="f14">
<li id="text2">If this template is beneficial for your website or business, please kindly </li>
</div>
<div class="col-md-12"id="f15">
<li id="text2">support us a little via PayPal. Please also tell your friends about our</li>
</div>
<div class="col-md-12"id="f16">
<li id="text2">great website. Thank you.</li>
</div>
<div class="col-md-12"id="f18">
<div class="col-md-4"id="f17">
<li id="text4">Discover More</li>
</div>
</div>
</div>
<div class="col-md-6" id="f3">
<div class="col-md-12"id="g1">
<!--第一小块-->
<div class="col-md-6"id="g3">
<div class="col-md-12" id="g5">
<li id="text5">Leather Bags</li>
</div>
<div class="col-md-12" id="g6">
<li id="text6">Latest Collection</li>
</div>
</div>
<!--第二小块-->
<div class="col-md-6"id="g4">
</div>
</div>
<div class="col-md-12"id="g1">
<!--第一小块-->
<div class="col-md-6"id="g9">
</div>
<!--第二小块-->
<div class="col-md-6"id="g8">
<div class="col-md-12" id="g5">
<li id="text5">Different Types</li>
</div>
<div class="col-md-12" id="g6">
<li id="text6">Over 304 Products</li>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1" ></div>
</div>
</div>
<!--第七行-->
<div class="row" style="">
<div class="col-md-1" ></div>
<div class="col-md-10"id="h1">
<div class="col-md-8"id="h3">
<li id="text7">Social Media</li>
</div>
<div class="col-md-8"id="h4">
<li id="text2">Details to details is what makes Hexashop different from the other themes.</li>
</div>
<div class="col-md-11"id="h2">
<div class="col-md-2"id="h5"></div>
<div class="col-md-2"id="h6"></div>
<div class="col-md-2"id="h7"></div>
<div class="col-md-2"id="h8"></div>
<div class="col-md-2"id="h9"></div>
<div class="col-md-2"id="h10"></div>
</div>
</div>
<div class="col-md-2" ></div>
</div>
<!--第八行-->
<div class="row">
<div class="col-md-1" ></div>
<div class="col-md-6" id="i1">
<div class="col-md-12"id="i3">
<li id="t1">By Subscribing To Our Newsletter You</li>
</div>
<div class="col-md-12"id="i4">
<li id="t1">Can Get 30% Off</li>
</div>
<div class="col-md-12"id="i5">
<li id="t2">Details to details is what makes Hexashop different from the other themes.</li>
</div>
<div class="col-md-12"id="i6">
<div class="col-md-4"id="i7">
<li id="t3">Your name</li>
</div>
<div class="col-md-5"id="i8">
<li id="t3">Your Email Address</li>
</div>
<div class="col-md-1"id="i9"></div>
</div>
</div>
<div class="col-md-4" id="i2">
<div class="col-md-6" id="j1">
<div id="p1">
<li id="tt1">Store Location:</li>
</div>
<div id="p2">
<li id="tt2">Sunny Isles Beach, FL </li>
</div>
<div id="p3">
<li id="tt2">33160, United States </li>
</div>
</div>
<div class="col-md-6" id="j2">
<div id="p1">
<li id="tt1">Work Hours:</li>
</div>
<div id="p2">
<li id="tt2">07:30 AM - 9:30 PM </li>
</div>
<div id="p3">
<li id="tt2">Daily</li>
</div>
</div>
<div class="col-md-6" id="j3">
<div id="p1">
<li id="tt1">Phone:</li>
</div>
<div id="p2">
<li id="tt2">010-020-0340</li>
</div>
<div id="p3">
<li id="tt2"></li>
</div>
</div>
<div class="col-md-6" id="j4">
<div id="p1">
<li id="tt1">Email:</li>
</div>
<div id="p2">
<li id="tt2">info@company.com</li>
</div>
<div id="p3">
<li id="tt2"></li>
</div>
</div>
<div class="col-md-6" id="j5">
<div id="p1">
<li id="tt1">Office Location:</li>
</div>
<div id="p2">
<li id="tt2">North Miami Beach </li>
</div>
<div id="p3">
<li id="tt2"></li>
</div>
</div>
<div class="col-md-6" id="j6">
<div id="p1">
<li id="tt1">ocial Media::</li>
</div>
<div id="p2">
<li id="tt2">Facebook,Instagram, </li>
</div>
<div id="p3">
<li id="tt2">Behance, Linkedin</li>
</div>
</div>
</div>
<div class="col-md-2" ></div>
</div>
<!--第九行-->
<div class="row">
<div class="col-md-12" id="j7">
<div class="col-md-2" ></div>
<div class="col-md-8" id="j8">
<div class="col-md-3"id="k1">
<div class="col-md-12"id="k5"></div>
<div class="col-md-12"id="k6">
<li id="tt3">16501 Collins Ave, Sunny Isles Beach,</li>
</div>
<div class="col-md-12"id="k7">
<li id="tt3">FL 33160, United States</li>
</div>
<div class="col-md-12"id="k8">
<li id="tt3">hexashop@company.com</li>
</div>
<div class="col-md-12"id="k9">
<li id="tt3">010-020-0340</li>
</div>
</div>
<div class="col-md-3"id="k2">
<div class="col-md-12"id="u6">
<li id="tt4">Shopping & Categories</li>
</div>
<div class="col-md-12"id="u7">
<li id="tt3">Men’s Shopping</li>
</div>
<div class="col-md-12"id="u8">
<li id="tt3">Women’s Shopping</li>
</div>
<div class="col-md-12"id="u9">
<li id="tt3">Kid's Shopping</li>
</div>
</div>
<div class="col-md-3"id="k3">
<div class="col-md-12"id="u6">
<li id="tt4">Useful Links</li>
</div>
<div class="col-md-12"id="u7">
<li id="tt3">Homepage</li>
</div>
<div class="col-md-12"id="u8">
<li id="tt3">About Us</li>
</div>
<div class="col-md-12"id="u9">
<li id="tt3">Help</li>
</div>
<div class="col-md-12"id="u10">
<li id="tt3">Contact Us</li>
</div>
</div>
<div class="col-md-3"id="k4">
<div class="col-md-12"id="u6">
<li id="tt4">Help & Information</li>
</div>
<div class="col-md-12"id="u7">
<li id="tt3">Help</li>
</div>
<div class="col-md-12"id="u8">
<li id="tt3">FAQ's</li>
</div>
<div class="col-md-12"id="u9">
<li id="tt3">Shipping</li>
</div>
<div class="col-md-12"id="u10">
<li id="tt3">Tracking ID</li>
</div>
</div>
</div>
<div class="col-md-2" ></div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="j9">
<div class="col-md-2" ></div>
<div class="col-md-12" id="j10">
<li id="tt3">Copyright © 2022.Company name All rights reserved.</li>
</div>
<div class="col-md-12" id="last" ></div>
</div>
</div>
</div>
</body>
</html>
二十六、页面小练2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猫狗</title>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="static/css/bootstrap-icons.css"/>
<link rel="stylesheet" href="css/homework.css">
</head>
<body>
<div class="header row">
<div class="col clearfix">
<!-- <i class="m_icon bi-geo-alt"></i> -->
<div class="text-box">
<h3>OUR OFFICE</h3>
<p>123, stroom, New York, USA</p>
</div>
</div>
<div class="col">
<i class="m_icon bi-envelope-open"></i>
<div class="text-box">
<h3>OUR OFFICE</h3>
<p>123, stroom, New York, USA</p>
</div>
</div>
<div class="col">
<i class="m_icon bi-phone-vibrate"></i>
<div class="text-box">
<h3>OUR OFFICE</h3>
<p>123, stroom, New York, USA</p>
</div>
</div>
</div>
<div class="main-container">
<div class="header-box clearfix">
<div class="logo-box">
<i class="m_icon bi bi-shop" style="font-size: 30px;"></i>
<h1>PET SHOP</h1>
</div>
<div class="right-nav-box clearfix">
<ul class="clearfix">
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Product</li>
<li>Pages<i class="bi bi-caret-down-fill"></i></li>
</ul>
<div class="contact-box">
<h3>Concact<i class="bi bi-arrow-right-short"></i></h3>
</div>
</div>
</div>
<div class="cover-box">
<h1>PET SHOP</h1>
<p class="line">MAKE YOUR PET HAPPY</p>
<p class="descript">Doloretemporclita lorem rebum kasd eirmod dolore was kasd,</p>
<p class="descript">Kasd clita ea justo est kasd erat clita sea</p>
<div class="video-box clearfix">
<a href="">READ MORE</a>
<div class="play-box">
<i class="display-icon"></i>
<p>Play Video</p>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
