【CSS】美化网页元素+盒子模型
2024-04-07 07:14:19
文章目录
- 1、美化网页元素
- 1.1、为什么要美化网页
- 1.2、字体样式
- 1.2、文本样式
- 1.4、超链接伪类
- 1.5、文本阴影
- 1.6、列表
- 1.7、背景图像应用
- 1.8、渐变
- 2、盒子模型
- 2.1、什么是盒子模型
- 2.2、边框
- 2.3、内外边距
- 2.4、圆角边框
- 2.5、阴影
1、美化网页元素
1.1、为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮才能吸引用户
- 凸显页面的主题
- 提高用户的体验
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>
1.2、字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--
font-family：字体
font-size：字体大小
font-weight:字体粗细
--><style>body{font-family: 行书;color:palevioletred;}h1{font-size: 50px;}.p1{font-weight: bold;}</style></head>
<body>
<h1>人物介绍</h1>
<p class="p1">吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。
</p><p >1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员 [1-2] 。<br>2001年，主演文艺片《游园惊梦》 [3] 。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角 [4] 。<br>2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第41届台湾电影金马奖最佳男配角奖 [5] 。<br>2005年，凭借动作片《旺角黑夜》首次提名第24届香港电影金像奖最佳男主角 [6] 。<br>
</p>
<p>2006年，执导了个人电影处女作《四大天王》，凭该片获得第26届香港电影金像奖新晋导演奖 [7] 。<br>2007年，在犯罪片《门徒》中饰演阿力 [8] 。2010年，担任监制并主演了爱情片《如梦》，凭该片第二次提名第46届台湾电影金马奖最佳男主角 [10] 。<br>2011年，在爱情片《单身男女》中饰演建筑师方启宏 [11] 。2012年，在警匪片《窃听风云2》中饰演司马念祖 [38] 。2014年，主演犯罪片《魔警》，<br>凭该片第二次提名第34届香港电影金像奖最佳男主角 [12] ；同年，主演个人首部美剧《荒原》系列 [13] 。2015年，主演励志片《滚蛋吧！肿瘤君》。2016年，在奇幻片《魔兽》中饰演古尔丹 [14] 。<br>2018年，吴彦祖参与设计的作品“木兰坊”入围了英国皇家建筑师学会奖 [87] ；同年，在动作片《古墓丽影：源起之战》中饰演陆仁 [15] 。2020年，在警匪片《除暴》中饰演张隼 [16] 。<br></p>
</body>
</html>
1.2、文本样式
- 颜色 color
- 文本对齐的方式 text-align：center
- 首行缩进 text-indent：2px
- 行高 line-height
- 装饰 text-decoration：underline
- 文本图片水平对齐 vertical-align：middle
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1{color: rgba(0,255,255,0.9);text-align: center;}p{text-indent: 2em;}.p1{background: gray;height: 300px;line-height: 50px;}</style></head>
<body>
<h1>人物介绍</h1>
<p>吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。
</p><p >1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员 [1-2] 。2001年，主演文艺片《游园惊梦》 [3] 。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角 [4] 。2004年，因出演动作片《新警察故事》中关祖一角受到广泛关注，并凭借该角色获得第41届台湾电影金马奖最佳男配角奖 [5] 。2005年，凭借动作片《旺角黑夜》首次提名第24届香港电影金像奖最佳男主角 [6] 。
</p>
<p class="p1">2006年，执导了个人电影处女作《四大天王》，凭该片获得第26届香港电影金像奖新晋导演奖 [7] 。2007年，在犯罪片《门徒》中饰演阿力 [8] 。2010年，担任监制并主演了爱情片《如梦》，凭该片第二次提名第46届台湾电影金马奖最佳男主角 [10] 。2011年，在爱情片《单身男女》中饰演建筑师方启宏 [11] 。2012年，在警匪片《窃听风云2》中饰演司马念祖 [38] 。2014年，主演犯罪片《魔警》，凭该片第二次提名第34届香港电影金像奖最佳男主角 [12] ；同年，主演个人首部美剧《荒原》系列 [13] 。2015年，主演励志片《滚蛋吧！肿瘤君》。2016年，在奇幻片《魔兽》中饰演古尔丹 [14] 。2018年，吴彦祖参与设计的作品“木兰坊”入围了英国皇家建筑师学会奖 [87] ；同年，在动作片《古墓丽影：源起之战》中饰演陆仁 [15] 。2020年，在警匪片《除暴》中饰演张隼 [16] 。</p>
</body>
</html>
1.4、超链接伪类
- -a：link 正常，未访问的链接
- -a：visted 用户已访问的链接
- -a：hover 当用户鼠标放在链接上时
- -a：active 链接被点击的那一刻
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>a{text-decoration: none;color: black;}/*鼠标悬浮的颜色*/a:hover{color: orange;}/*鼠标按住未释放*/a:active{color: green;}
</style>
<body>
<a href="#"><img src="data:images/a.jpg" alt="">
</a><p><a href="#">码出高效：Java开发手册</a>
</p>
<p><a href="">作者孤尽老师</a>
</p>
<p>￥99
</p>
</body>
</html>
1.5、文本阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{text-shadow：#3ccf75 10px -10px 2px；
}
1.6、列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><style>#nav{width:300px;background: #a0a0a0;}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red;}/*ul lilist-style:none 去掉圆点circle 空心圆decimal 数字square 正方形*/ul li{height: 30px;list-style: none;text-indent: 1em;}a{text-decoration: none;font-size: 14px;color: #000;}a:hover{color: gray;text-decoration: underline;}
</style>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a><a href="#">音像</a><a href="#">数字商品</a></li><li><a href="#">家用电器</a><a href="#">手机</a><a href="#">数码</a></li><li><a href="#">电脑</a><a href="#">办公</a></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a><a href="#">个性化妆</a></li><li><a href="#">礼品箱包</a><a href="#">钟表</a><a href="#">珠宝</a></li><li><a href="#">食品饮料</a><a href="#">保健食品</a></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li></ul>
</div></body>
</html>
1.7、背景图像应用
<style>div{width: 1000px;height: 700px;border:1px solid red;background-image: url("images/img.png");/*默认是全部平铺的*/}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}
</style>
#nav{width:300px;background: #a0a0a0;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red;/*颜色，图片，图片位置，平铺方式*/background: red url("images/img_1.png") 100px 15px no-repeat;
}
/*ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("images/img.png");background-repeat: no-repeat;background-position: 236px 2px;
}
a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{color: gray;text-decoration: underline;
}
1.8、渐变
网址：https://www.grabient.com/
<style>body{background-color: #4158D0;background-image: linear-gradient(135deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}
</style>
2、盒子模型
2.1、什么是盒子模型
CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性
首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height
首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height
2.2、边框
<style>/*body总有一个默认的外边距为0*/body{margin: 0;}/*border:粗细，样式，颜色*/#box{width: 300px;border:1px solid red;}h2{font-size: 18px;background-color: brown;line-height: 30px;}form{background: #dcd094;}div:nth-of-type(1) {border: 1px solid black;}div:nth-of-type(2) {border: 1px dashed yellow;}div:nth-of-type(3) {border: 1px solid green;}
</style>
2.3、内外边距
<style>/*body总有一个默认的外边距为0*/body{margin: 0;}/*border:粗细，样式，颜色*//*margin默认顺序上右下左，顺时针旋转*/#box{width: 300px;border:1px solid red;margin: 0 auto;}h2{font-size: 18px;background-color: brown;line-height: 30px;}form{background: #dcd094;}input{border: 1px solid black;}div:nth-of-type(1){}
</style>
盒子的计算方式：这个元素到底多大？
margin+border+padding+内容宽度
2.4、圆角边框
<!-- 左上 右上 右下 左下 顺时针-->
<!-- 圆圈：圆角 = 半径！-->
<style>div{width: 100px;height: 50px;border: 1px solid red;border-radius: 50px 50px 0 0;}
</style>
2.5、阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- margin: 0 auto;居中-->
<!-- 要求：块元素，块元素有固定的宽度--><style>div{margin: 0 auto;border-radius: 50px;box-shadow: 10px 10px 100px yellow;}</style></head>
<body><div style="width: 500px ;text-align: center" ><img src="../images/img.png" alt="">
</div></body>
</html>
【CSS】美化网页元素+盒子模型相关推荐
- CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
- 【CSS—美化网页元素】
1. 字体样式 span变迁:重点要突出的字,用span套起来 <!DOCTYPE html> <html lang="en"> <head>& ...
- CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
- 第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 编辑网页 ...
- CSS美化网页元素大全
< span>标签 作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性 属性 描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...
- 第五章 CSS美化网页元素
练习1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录 一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子 二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
- web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- CSS基本知识之盒子模型
CSS基本知识之盒子模型 首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
- CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的 优先级 公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
最新文章
- php 定义数组使用逗号,
- 优秀logo设计解析_优秀Logo设计！汽车类标志表现手法
- 软件配置管理七重境界
- C++ Vector的使用
- vue2.0 之文本渲染-v-html、v-text
- ITK:计算图像在特定方向上的导数
- m.2接口和nvme区别_透明款散热不好，那么ORICO 全铝NVMe固态硬盘盒了解一下？
- 工作群里常见表情的真正含义……
- the pdf expert for android v2.6.0,PDF Expert
- 知识整理（你想要的Linux知识都在这里）
- NumPy Cookbook 带注释源码 十、Scikit 中的乐趣
- python32什么意思_“python2”和“python3”有什么区别？
- 洛谷——P1046 [NOIP2005 普及组] 陶陶摘苹果
- 团队冲刺第一阶段第九天
- java程序无法启动_无法打开java小程序？小迅支招
- 户籍管理系统的设计与实现
- Why、When的疑问代词_22
- 如何备战 CCNP 考试
- Unity 制作两个按钮分别控制两个声音组件
- MySQL数据库之数据库约束，一文带你了解