目录
WebBasic 网页编程基础
(学习如何开发页面,安装HBuilder)
CSS:
(学习如何美化页面)
Cascading Style Sheet 层叠样式表. 作用: 美化页面
引入方式:
在html页面中添加css样式代码:
如何在html页面中添加css样式代码?总共有三种方式:
1. 内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用
2. 内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用
3. 外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入css文件,可以实现多页面复用 工作中外部样式用的最多,学习过程中更多使用内部样式.
选择器:
1. 标签名选择器
- 格式: 标签名{样式代码}
- 作用: 选取页面中所有同名标签
2. id选择器
- 格式: #id{样式代码}
- 作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中
3. class选择器
- 格式: .class{样式代码}
- 作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值)
4. 分组选择器
- 格式: div,#id,.class{样式代码}
- 作用: 可以将多个选择器合并成一个选择器
5. 属性选择器
- 格式: 标签名[属性名='值']{样式代码}
- 作用: 可以通过元素的属性获取元素
6. 子孙后代选择器
- 格式: body div span{样式代码}
- 作用: 选取body里面的div里面的所有span(包括子元素span和所有后代span)
7. 子元素选择器
- 格式: body>div>span{样式代码}
- 作用:选取body里面的div里面的子元素span
8. 伪类选择器
- 格式: 标签名:link/visited/hover/active{样式代码}
- 作用: 选取元素的状态 状态包括(未访问状态,访问过状态,悬停状态,点击状态)
9. 任意元素选择器
- 格式: *{样式代码}
- 作用: 选取页面中所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
color: red;
}
.c1,h2{
color: green;
}
input[type='password']{
background-color: red;
}
li,#d1{
background-color: yellow;
}
h2,input[type='text']{
background-color: blue;
}
</style>
</head>
<body>
<div id="d1">d1</div>
<div class="c1">d2</div>
<div>d3</div>
<span>s1</span>
<span class="c1">s2</span>
<span>s3</span>
<ul>
<li>水煮肉</li>
<li class="c1">水煮鱼</li>
<li>红烧肉</li>
</ul>
<h2>h2</h2>
<input type="text" />
<input type="password" />
</body>
</html>
颜色赋值
- 三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,
- 颜色单词赋值 red
- 6位16进制赋值 #ff0000 红255 绿0 蓝0
- 3位16进制赋值 #f00 每一位重复一次 f00=ff0000
- 3位10进制赋值 rgb(255,0,0)
- 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小 越透明
背景图片
- background-image:url(路径); 设置背景图片
- background-size:200px 300px; 设置背景图片尺寸
- background-repeat:no-repeat; 禁止重复
- background-position:50% 100%; 背景图片位置
如何查看目标页面元素样式
- 使用谷歌浏览器
1. 在元素上面右键->检查
2. 右侧窗口出现后 点击小箭头拾取器 选中想查看的元素
文本和字体相关
1. 文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
2. 文本对齐方式: text-align: left/right/center;
3. 文本颜色: color:red;
4. 文本阴影: text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)
5. 行高: line-height:20px; 可以通过行高实现垂直居中
6. 字体大小: font-size:20px;
7. 字体加粗: font-weight:bold加粗/normal去掉加粗;
8. 字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;
9. 斜体: font-style: italic;
元素显示方式display
1. block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 p
2. inline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等
3. inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input
- 每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的 如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block
圆角
- border-radius:5px; 值越大越圆 当值大于宽高一半时为圆形
盒子模型
- 盒子模型=宽高+外边距+边框+内边距
- 宽高: 控制元素大小
- 外边距: 控制元素的位置
- 边框: 控制边框效果
- 内边距: 控制元素内容的位置
盒子模型之宽高
- width/height赋值,赋值方式两种:
1. 像素
2. 上级元素百分比
- 行内元素是不能修改宽高的
盒子模型之外边距
- 外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置
- 赋值方式:
1. 单独某个方向赋值 margin-left/right/top/bottom: 10px;
2. 四个方向赋值 margin:10px;
3. 上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中
4. 上右下左四个方向 margin:10px 20px 30px 40px 顺时针 上右下左
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 198px;
height: 233px;
background-color: #e8e8e8;
}
.p1{
font-size: 12px;
text-align: center;
/* 把p标签自带外边距去掉 */
margin:0;
}
.p2{
font-size: 12px;
color: #0AA1ED;
font-weight: bold;
text-align: center;
margin: 6px 0;
}
a{
width: 100px;
height: 24px;
background-color: #0AA1ED;
display: block;
text-align: center;
margin: 0 auto;
color: white;
text-decoration: none;
font-size: 12px;
line-height: 24px;
border-radius: 3px;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" >
<p class="p1">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
<p class="p2">￥4600.00</p>
<a href="#">查看详情</a>
</div>
</body>
</html>
CSS的三大特性
1. 继承:元素可以继承上级元素的文本和字体相关样式,部分标签自带效果不受继承影响 比如:超链接的字体颜色 h1-h6字体大小都不受继承影响
2. 层叠:多个选择器有可能选择到同一个元素,给元素添加样式时,如果添加的样式不同则全部层叠生效,如果样式相同则只能生效一个,由优先级决定哪一个生效
3. 优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中)
盒子模型之外边距
- 元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置
margin-left/right/top/bottom:10px; 单独某一个方向赋值
margin:10px 四个方向赋值
margin:10px 20px 上下10 左右20
margin:0 auto: 块级元素居中
margin:10px 20px 30px 40px; 上右下左 顺时针
- 左右相邻外边距累加,上下相邻外边距取最大值
- 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,通过给上级元素添加overflow:hidden方式解决
- 行内元素上下外边距无效
盒子模型之边框
- 赋值方式:
1. border: 粗细 边框样式 颜色; 四个方向添加边框
2. border-left/right/top/bottom: 粗细 边框样式 颜色; 单独某个方向添加边框
- 圆角: border-radius:5px; 值越大越圆
盒子模型之内边距
- 什么是内边距: 元素边缘距内容的距离, 用来控制元素内容的位置
- 赋值方式:(类似外边距)
1. padding-left/right/top/bottom: 10px; 单独某个方向赋值
2. padding:10px; 四个方向赋值
3. padding:10px 20px; 上下10 左右20
4. padding:10px 20px 30px 40px; 上右下左
- 如果需要移动元素的子元素位置有两种方式:
1. 给元素添加内边距移动,会影响元素宽高
2. 给子元素添加外边距移动,不会影响元素宽高,但是需要考虑粘连问题
盒子模型回顾:
1. 宽高width/heigh: 控制元素的显示大小
2. 外边距margin:控制元素的显示位置
3. 边框border: 控制边框效果
4. 内边距padding:控制元素内容的位置
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/* 设置全局的字体大小及颜色 */
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
margin: 0;
background-color: #f5f5f5;
}
body>div{
width: 375px;
height: 376px;
background-color: #e8e8e8;
background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png);
background-size: 292px 232px;
background-repeat: no-repeat;
background-position: 80% 80%;
overflow: hidden;
}
div>div{
width: 253px;
height: 232px;
margin: 39px 0 0 25px;
}
.p1{
font-size: 32px;
color: #333;
margin-bottom: 12px;
}
.p3{
font-size: 24px;
color: #0AA1ED;
font-weight: bold;
margin-bottom: 12px;
}
a{
width: 132px;
height: 40px;
display: block;
background-color: #0AA1ED;
text-align: center;
line-height: 40px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 3px;
}
</style>
</head>
<body>
<div>
<div>
<p class="p1">颜值 框不住</p>
<p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存</p>
<p class="p3">￥6888.00</p>
<a href="#">查看详情</a>
</div>
</div>
</body>
</html>
定位方式:
文档流定位(默认)
- 又称为静态定位,元素默认的定位方式为文档流定位
- 格式: position:static;
- 元素显示特点: 块级元素从上往下排列 行内元素从左向右排列
- 如何控制元素的显示位置?
通过给元素添加外边距
相对定位
- 格式: position:relative;
- 元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)
- 如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于初始位置做位置偏移.
绝对定位
- 格式: position:absolute;
- 显示特点: 元素脱离文档流(元素会把之前所占位置让出)
- 如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(../imgs/1.jpg);
}
body>div{
width: 280px;
background-color: rgba(0,0,0,0.3);
padding: 10px;
position: relative;/* 参照物 */
}
input{
width: 240px;
/* 去掉文本框自带边框 */
border: none;
/* 内边距会影响宽高 */
padding: 10px 20px;
}
img{
position: absolute;
top: 14px;
right: 20px;
}
p{
font-size: 12px;
color: red;
margin: 5px 0 0 0;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入您的用户名"/>
<img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" >
<p>用户名不能为空!</p>
</div>
</body>
</html>
固定定位
- 当元素需要固定在窗口的某个位置的时候使用固定定位
- 格式: position:fixed;
- 显示特点:元素脱离文档流
- 如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口做位置偏移
浮动定位
-格式: float:left/right;
- 显示特点: 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素停止.
- 当需要将纵向排列的元素改成横向排列时使用浮动定位
- 如果元素的所有子元素全部浮动则自动识别的高度为0,给元素添加overflow:hidden;解决此问题
- 浮动元素受上级元素宽度影响,如果一行装不下会自动换行,换行时有可能被卡主
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
/* 去掉无序列表图标 */
list-style-type: none;
}
li{
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">免费课</a></li>
<li><a href="#">直播课</a></li>
<li><a href="#">会员课</a></li>
<li><a href="#">精品课</a></li>
<li><a href="#">线上班</a></li>
<li><a href="#">线下班</a></li>
</ul>
</body>
</html>
行内元素的垂直对齐方式vertical-align
1. baseline 基线对齐 (横格本第三条线)
2. top 上对齐
3. middle 中间对齐
4. bottom 下对齐
z-index样式
- 通过此样式控制元素显示层级,层级越高元素显示越靠前
- 需要结合position属性使用,一般position:relative; 因为使用其它值元素会脱离文档流会对之前效果产生影响.
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
width: 611px;
height: 376px;
background-color: #e8e8e8;
}
img{
width: 254px;
height: 279px;
/* 控制图片位置 */
margin: 52px 0 0 45px;
float: left;
}
div>div{
float: left;
width: 245px;
height: 232px;
margin: 68px 0 0 36px;
}
.p1{
font-size: 32px;
color: #333;
margin-bottom: 12px;
margin-top: 0px;
}
.p2{
font-size: 24px;
color: #E89AA8;
font-weight: bold;
margin-bottom: 12px;
}
a{
font-size: 20px;
color: white;
width: 132px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
background-color: #E89AA8;
border-radius: 3px;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img1.png" >
<div>
<p class="p1">雅致布面年历本</p>
<p>有色更有范！变色PU皮，撞色搭配，绚丽色彩，张扬个性，点亮生活新时尚！</p>
<p class="p2">仅售 ￥49.00</p>
<a href="#">查看详情</a>
</div>
</div>
</body>
</html>
overflow溢出设置
- hidden: 超出范围隐藏
- visible(默认):超出范围显示
- scroll: 超出范围滚动显示
学子商城练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body>div {
/* 以下两行代码为了居中 */
width: 1000px;
margin: 0 auto;
}
#t_left {
width: 611px;
height: 376px;
background-color: #e8e8e8;
float: left;
position: relative;
/* 参照物 */
}
#t_right {
width: 375px;
height: 376px;
background-color: #e8e8e8;
float: right;
}
#top_div {
overflow: hidden;
margin-bottom: 10px;
}
#b_left {
width: 366px;
height: 233px;
background-color: #e8e8e8;
float: left;
}
.b_right {
float: right;
width: 198px;
height: 233px;
background-color: #e8e8e8;
margin-left: 10px;
/* 间距 */
}
#b_div {
overflow: hidden;
/* 子元素全部浮動了 */
}
/* ************************11111111开始1111111111************************* */
body {
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
background-color: #f5f5f5;
}
#t_left>div {
width: 245px;
height: 232px;
margin: 68px 0 0 36px;
}
.title_p {
font-size: 32px;
color: #333;
margin-bottom: 12px;
}
.price_p {
font-size: 24px;
color: #0AA1ED;
margin-bottom: 12px;
font-weight: bold;
}
#top_div a {
font-size: 20px;
color: white;
background-color: #0AA1ED;
text-decoration: none;
text-align: center;
line-height: 40px;
display: block;
width: 132px;
height: 40px;
border-radius: 3px;
}
#t_left>img {
width: 318px;
height: 319px;
position: absolute;
/* 默认坐标相对于窗口 需要让t_left做参照物 给t_left添加position:relative */
top: 35px;
right: 20px;
}
/* ************************11111111结束1111111111************************* */
/* ******************22222222开始2222222222******************** */
#t_right>div{
width: 253px;
height: 232px;
margin: 39px 0 0 25px;
}
#t_right{
position: relative; /* 参照物*/
}
#t_right>img{
width:292px;
height: 232px;
position: absolute;
top: 130px;
right: 20px;
}
/* ******************22222222结束2222222222******************** */
</style>
</head>
<body>
<div>
<div id="top_div">
<div id="t_left">
<div>
<p class="title_p">灵越 燃7000系列</p>
<p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存</p>
<p class="price_p">￥4999.00</p>
<a href="#">查看详情</a>
</div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png">
</div>
<div id="t_right">
<div>
<p class="title_p">颜值 框不住</p>
<p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>
英特尔HD显卡620含共享显卡内存</p>
<p class="price_p">￥6888.00</p>
<a href="#">查看详情</a>
</div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png">
</div>
</div>
<div id="b_div">
<div id="b_left">
</div>
<div class="b_right">
</div>
<div class="b_right">
</div>
<div class="b_right">
</div>
</div>
</div>
</body>
</html>
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
