CSS网页美化与盒子模型
Posted 轻狂书生han
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS网页美化与盒子模型相关的知识，希望对你有一定的参考价值。
3.美化网页
3.1、为什么要美化网页
1.有效传递页面信息
2.美化网页，页面漂亮，才能吸引用户
3.凸显页面的主题
4.提高用户的体验
span标签：重点要突出的字使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1
font-size: 50px;
</style>
</head>
<body>
欢迎学习<span id="title1">java</span>
</body>
</html>
3.2、字体样式
<!--
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body
font-family: "Arial Black,楷体";
color:#a13d30
h1
font-size: 50px;
.p1
font-weight: bolder;
</style>
3.3、文本样式
1.颜色 color rgb rgba
2.文本对齐的方式 text-align = center
3.首行缩进 text-indent
4.行高 line-height 单行文字上下居中！
5.装饰 text-decoration
6.文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色；
单词
RGB：0~F
RGBA A：0~1
text-align:排版，居中
text-indent:2em;段落首行缩进
height:300px ;
line-height: 300px;
行高，和块的高度一致，就可以上下居中
-->
<style>
h1
color: rgba(0,255,255,0.9);
text-align: center;
.p1
text-indent: 2em;
.p3
background: purple;
height:300px ; text-decoration: ;
line-height: 300px;
/*下划线*/
.l1
text-decoration: underline;
/*中划线*/
.l2
text-decoration: line-through;
/*上划线*/
.l3
text-decoration: overline;
/*a标签去下划线*/
a
text-decoration: none;
</style>
</head>
<body>
<a href="">123123</a>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p3">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p>
She walks in beauty, like the night
Of cloudless climes and starry skies;
And all that’s best of dark and bright
Meet in her aspect and her eyes:
Thus mellowed to that tender light
Which heaven to gaudy day denies.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 水平对齐~参照物， a，b -->
<style>
img,span
vertical-align: middle;
</style>
</head>
<body>
<p>
<img src="images/李光洙.png" >
<span>dasdsadasdas</span>
</p>
</body>
</html>
3.4阴影
/*text-shadow 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price
text-shadow: blue 10px 10px 10px;
3.5超链接伪类
正常情况下，a，a:hover
/*默认的颜色*/
a
text-decoration: none;
color: black;
/*鼠标悬浮的状态(只需要记住)*/
a:hover
color: orange;
font-size: 50px;
3.6列表
/* ul li*/
/*
list-style：
noon 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
ul
background: gray;
ul li
height: 30px;
list-style: none;
text-indent: 1em;
3.7背景
背景颜色
背景图片
<style>
div
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.jpg");
/* 默认是全部平铺的*/
.div1
background-repeat: repeat-x;
.div2
background-repeat: repeat-y;
.div3
background-repeat: no-repeat ;
</style>
练习：
3.8、渐变
background-color: #4158D0;
background-image: linear-gradient(167deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4.盒子模型
4.1.什么是盒子模型
margin：外边距
padding：内边距
border：边框
4.2、边框
1.边框的粗细
2.边框的样式
3.边框的颜色
4.3内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用 居中元素
margin: 0 auto ;
-->
<style>
#box
width: 300px;
border: 1px solid red;
margin: 0 auto ;
/*
顺时针旋转
margin: 0 上下左右
margin: 0 1px 上下 左右
margin: 0 1px 2px 3px 上 下 左 右
*/
h2
font-size: 16px;
background-color: #3cbda6 ;
color: white;
margin: 0;
form
background: green;
input
border: 1px solid black;
div:nth-of-type(1)
padding: 10px 2px;
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="test">
</div>
<div>
<span>密码：</span>
<input type="test">
</div>
<div>
<span>邮箱：</span>
<input type="test">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
4.4圆角边框
4个角
<style>
div
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 20px 10px 5px;
</style>
4.5盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
margin: 0 auto;居中
要求：块元素有固定的宽度
-->
<style>
/*div*/
/* width: 100px;*/
/* height: 100px;*/
/* margin: 10px;*/
/* border: 10px solid red;*/
/* box-shadow: 10px 10px 100px yellow;*/
/**/
img
/*margin: 0 auto;*/
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
</style>
</head>
<body>
<!--<div style="width: 500px;display: block;text-align: center">-->
<!-- <div style="margin: 0 auto">-->
<!-- <img src="images/1.jpg" >-->
<!-- </div>-->
<!--</div>-->
<div style="margin: 0 auto">
<img src="images/1.jpg" >
</div>
</body>
</html>
5.浮动
5.1标准文档流
块级元素：独占一行
h1~h6 p div 列表...
行内元素：不独占一行
span a img strong...
行内元素 可以被包含咋爱块级元素种 反之不可以
5.2display
<!---
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联 ，在一行！
-->
<style>
div
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
span
width: 100px;
height: 100px;
border: 1px dashed red;
display: inline-block;
</style>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况下都是用的float
5.3float
1、左右浮动 float
div
margin:10px;
padding:5px;
#father
border:1px #000 solid;
.layer01
border:1px #F00 dashed;
display:inline-block;
float:right;
.layer02
border:1px #00F dashed;
display:inline-block;
float:right;
5.4父级边框塌陷的问题
clear
/*
clear: right;右侧不允许有浮动元素
clear: left;左侧不允许有浮动元素
clear： both; 两侧不允许有浮动元素
clear： none; 两侧不允许有浮动元素
*/
解决方案：
1.增加父级元素的高度~
#father
border: 1px #000 solid;
height: 800px;
2.增加一个空的div标签，清楚浮动
<div class="clear"> </div>
.clear
clear: both;
margin: 0;
padding: 0;
3.overflow
在父级元素种增加一个 overflow: hidden;
4.添加一个伪类：after
#father:after
content: \'\';
display: block;
clear: both;
小结：
-
浮动元素后面增加空的div
简单，空的div是不好的，代码中精良避免空div
-
设置父元素的高度
简单，于是怒假设有了固定的高度，就会被限制
-
overflow
简单，下拉的一些场景尽量避免使用
-
添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用
以上是关于CSS网页美化与盒子模型的主要内容，如果未能解决你的问题，请参考以下文章