1.电影卡片的练习
HTML
1)创建一个外层容器
2)创建图片容器
3)创建内容区容器
4)创建评分容器
5)创建星星图标和wb图标
<body>
<div class="outer">
<div class="img-wrapper">
<img src="./图片列表/u=3715204800,4027948962&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
</div>
<div class="info">
<h2 class="title">
动画电影
</h2>
<h3 class="category">
动画
</h3>
<p class="intro">
这是一部迪士尼的动画电影!
</p>
</div>
<div class="star-wrapper">
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
<span class="fab fa-weibo"></span>
</div>
</div>
</body>
CSS
1)设置外层容器:宽度、设置外边距居中、设置阴影
2)设置图片:宽度、对齐方式
3)设置标题:颜色、文字大小、外边距
4)内容区:外边距
5)设置类别:颜色、字体大小
6)设置类别的图标:左外边距、右外边距
7)设置简介:字体大小、颜色(与类别的样式一致)、行间距、下外边距
8)设置下边的内容:高度、上边框、行间距使其居中
9)设置星星的样式:设置向左浮动
10)设置wb图标:设置向右浮动
11)设置星星和图标的颜色、外边距
<style>
* {
margin: 0;
padding: 0;
}
.outer {
width: 240px;
margin: 100px auto;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.img-wrapper img {
width: 100%;
vertical-align: bottom;
}
.info {
padding: 0 18px;
}
.info .title {
color: #717171;
font-size: 18px;
margin: 13px 0 15px 0;
}
.info .category {
color: #acaaaa;
font-size: 14px;
}
.info .category i {
margin-left: 4px;
margin-right: 7px;
}
.info .intro {
color: #acaaaa;
font-size: 14px;
margin-left: 4px;
margin-top: 18px;
line-height:20px;
margin-bottom: 18px;
}
.star-wrapper{
height:46px;
line-height: 46px;
border-top:1px solid #e9e9e9;
color:#ddd;
padding:0 16px;
}
.star-wrapper .star{
float:left;
}
.star-wrapper .light{
color:#b9cb41;
}
.weibo{
float:right;
}
</style>
运行结果:
2.表格的简介
在网页中通过table标签来创建一个表格
1)在table中使用tr表示表格中的一行,有几个tr就有几行
2)在tr中使用td表示一个单元格,有几个td就有几个单元格
3) colspan横向合并单元格
<td colspan="2">c4</td>
4)rowspan纵向合并单元格
<td rowspan="2">c4</td>
3.长表格
可以将一个表格分成三个部分:
头部:thead
主题:tbody
底部:tfoot
th 表示头部的单元格:有加粗居中的效果
4.表格的样式
1)border-spacing :指定边框之间的距离
2)border-collapse:设置边框的合并
3)如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全部放到tbody中,tr不是tbody的子元素
4)默认情况下元素在td中是垂直居中的,可以通过vertical-align来设置
<style>
table{
width:50%;
border:1px solid black;
margin:0 auto;
border-collapse: collapse;
}
td{
border:1px solid black;
}
tbody>tr:nth-child(odd){
background-color: #bfa;
}
将元素设置为单元格td
display:table-cell;
5.表单简介
表单:在现实生活中用于提交数据
在网页中也可以使用表单,网页中的表单用于将本地的数据提交给服务器
1)使用form变迁来创建一个表单
2)form的属性
action:表单要提交的服务器的地址
使用input标签
3)文本框,数据要提交到服务器中,必须要为元素指定一个name属性
<input type="text" name="username">
4)密码框
<input type="password" name="password">
5)单选按钮,必须有相同的name属性
<input type="radio" name="a">
<input type="radio" name="a">
6)多选框
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
7.下拉列表
<select name="haha">
<option value="i">选项1</option>
<option value="i">选项2</option>
<option value="i">选项3</option>
</select>
8)提交按钮
<input type="submit" value="注册">
6.表单补充
1)重置按钮reset
2)普通的按钮botton
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
3)autocomplete用来设置开启或关闭自动补全
可选值:
off:关闭
on:开启
4)readonly将表单项设置为只读,数据会提交
5)disabled将表单设置为禁用,数据不会提交
6)autofocus:设置表单项自动获取焦点、
7.项目搭建
1)引入重置样式表
2)引入图标字体库
3)引入当前页面的样式表
4)引入公共样式表
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
body{
font:14px/1.5 Helvetica Neue;
color:#333;
min-width:1226px;
}
.w{
width:1226px;
margin:0 auto;
}
8.导航条结构的搭建
1)顶部导航条外部容器
2)创建内部容器
3)用ul和li标签创建左侧的导航条、购物车、用户登录注册信息
<div class="topbar-wrapper">
<div class="topbar">
<ul class="server">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">loT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开发平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li><a href="javascript:;">下载app</a></li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<ul class="shopcat">
<li><a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车</a></li>
</ul>
<ul class="user-info">
<li><a href="javascript:;">登录</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>