CSS-7-美化网页元素
2024-04-14 00:59:00
CSS -> 美化网页元素
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">成真</span>
</body>
</html>
2. 字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family: 字体font-size: 字体大小font-weight: 字体的粗细color: 字体颜色--><style>body {font-family: "Arial Black", 楷体;color: darkcyan;}h1{font-size: 50px;}.p1 {font-weight: bolder;}</style>
</head>
<body><h1>南柱赫</h1><p class="p1">南柱赫，1994年2月22日出生于韩国釜山广域市，韩国演员、模特。</p>
<p>2013年，通过设计师宋智武的时尚秀出道。</p>
<p>2014年7月，参加JTBC综艺节目《我去上学啦》;8月，出演tvN浪漫爱情喜剧《剩余公主》。2015年，主演KBS校园剧《Who Are You-学校2015》。2016年1月，出演tvN浪漫爱情剧《奶酪陷阱》;11月，主演MBC青春校园剧《举重妖精金福珠》。2017年，主演tvN奇幻爱情剧《河伯的新娘2017》。2018年，首次亮相大银幕，主演古装电影《安市城》。2020年，主演tvN励志剧《启动了》。
</p>
<p>You just want attentionYou don’t want my heartMaybe you just hate the thought of me with someone newYeah, you just want attentionI knew from the startYou’re just making sure I’m never gettin’ over you
</p></body>
</html>
- 可以写成一行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--字体风格--><style>p{font: oblique bolder 30px "Arial Black";}</style>
</head>
<body>
<p>You just want attentionYou don’t want my heartMaybe you just hate the thought of me with someone newYeah, you just want attentionI knew from the startYou’re just making sure I’m never gettin’ over you
</p>
</body>
</html>
3. 文本样式
- 颜色 color rgb rgba
- 文本的对齐方式 text-align: center
- 首行缩进 text-indent : 2em
- 行高 line-height: 单行文字上下居中 line-height = height
- 装饰 text-decoration:
- 文本图片水平对齐 vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--color:单词：red yellow blue...RGB 0~FRGBA A透明度0~1text-align: 排版rightleftcentertext-indent: 段落首行缩进line-height:行高和块的高度height一致，就可以上下居中--><style>h1{/*color: #0000FF;*//*color: rgb(0,255,255);*/color: rgba(0,255,255,0.8);text-align: center;}.p1{text-indent: 2em;}.p3{background: purple;height: 300px;line-height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去掉下划线*/a{text-decoration: none;}/*水平对齐 参照物*/img,span{vertical-align: middle;}</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>
<h1>南柱赫</h1><p class="p1">南柱赫，1994年2月22日出生于韩国釜山广域市，韩国演员、模特。</p>
<p>2013年，通过设计师宋智武的时尚秀出道。</p>
<p>2014年7月，参加JTBC综艺节目《我去上学啦》;8月，出演tvN浪漫爱情喜剧《剩余公主》。2015年，主演KBS校园剧《Who Are You-学校2015》。2016年1月，出演tvN浪漫爱情剧《奶酪陷阱》;11月，主演MBC青春校园剧《举重妖精金福珠》。2017年，主演tvN奇幻爱情剧《河伯的新娘2017》。2018年，首次亮相大银幕，主演古装电影《安市城》。2020年，主演tvN励志剧《启动了》。
</p>
<p class="p3">You just want attentionYou don’t want my heartMaybe you just hate the thought of me with someone newYeah, you just want attentionI knew from the startYou’re just making sure I’m never gettin’ over you
</p><p><img src="data:images/nzh.jpg" alt="" height="180px" width="120px"><span>南柱赫宝贝！</span>
</p>
</body>
</html>
4. 超链接伪类
- a:hover
/*鼠标悬浮的状态（重点！）*/
a:hover{color:purple;font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{color:yellow;
}
/*已访问后的状态*/
a:visited{color: red;
}
5. 阴影
/*text-shadow: aqua 10px 10px 10px; 阴影颜色、水平偏移、垂直偏移、阴影半径*/
#idol{text-shadow: aqua 10px 10px 2px;
}
6. 列表样式
- list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><link rel="stylesheet" href="css/style.css"></head>
<body>
<div id="div"><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>
#div{width: 300px;background: #9c9b9b;
}
.title{font-size:18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red;}
/*
list-style:none 去掉圆点circle 空心圆decimal 数字square 正方形*/
ul{background: #9c9b9b;
}
ul li{height: 30px;list-style: none;text-indent: 1em;
}a{text-decoration: none;font-size: 14px;color:#000000;
}
a:hover{color:orange;text-decoration: underline;
}
7. 背景
- 背景颜色
- 背景图片
<style>div{width: 1200px;height: 800px;border: 1px solid red;/*默认是全部平铺repeat*/background-image: url("images/babe.jpg");}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}
</style>
- 练习：
#div{width: 300px;background: #9c9b9b;
}
.title{font-size:18px;font-weight: bold;text-indent: 1em;line-height: 35px;/*background: red;*/background: red url("../images/d.png") 270px 2px no-repeat;}ul{background: #9c9b9b;
}
ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/r.png");background-repeat: no-repeat;background-position: 230px 2px;
}a{text-decoration: none;font-size: 14px;color:#000000;
}
a:hover{color:orange;text-decoration: underline;
}
8. 渐变
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
CSS-7-美化网页元素相关推荐
- CSS基本美化网页元素
字体样式 实例 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
- CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
- CSS笔记 —— 美化网页
本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记,里面会有一些视频的截图.代码和官网的概念,以及我个人的注释笔记,代码例子等. 全篇博客包括代码均为自己手打,结果截图均 ...
- CSS之美化网页（其二）
3.美化网页 3.1.为什么要美化网页 1.有效的传递页面信息 2.美化网页,页面漂亮才能吸引用户 3.凸显页面主题 4.提高用户的体验 span标签:重点要突出的字,使用span 套起来 <h ...
- CSS美化网页元素大全
< span>标签 作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性 属性 描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...
- 第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 编辑网页 ...
- 【狂神css笔记】美化网页元素
span标签:重点突出 字体样式 font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色 单词/#rgb/rgba(x,x,x,0~1)a ...
- 【CSS—美化网页元素】
1. 字体样式 span变迁:重点要突出的字,用span套起来 <!DOCTYPE html> <html lang="en"> <head>& ...
- 第五章 CSS美化网页元素
练习1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
最新文章
- 深度学习中的正则化技术(附Python代码)
- 「WC2018」即时战略
- 使用hibernate实现树形结构无限级分类
- Mycat高可用集群搭建
- 带t2芯片的mac装linux,Macbook Air 2018（包含T2芯片）安装Precision Touchpad触摸板驱动...
- linux alsa 音频管理,在Linux上的高级音频控制
- 计算机主机后面辐射大,电脑的背面辐射大吗
- PERL模拟飞鸽传书文件传输总结
- Android ViewPropertyAnimator 属性动画概述
- Spring框架jar包分类(转)
- Handler 消息传递机制
- mybatisplus报的mysql错误归纳
- python简单的分析文本
- tomcat7简单优化
- HOOK API（三）—— HOOK 所有程序的 MessageBox
- 值传递和引用传递_C++ 中的值传递和引用传递
- 如何使用虚拟串口软件进行串口调试
- 【C语言】pow函数的模拟实现（递归）
- 知识图谱概论（二）：概念具象化描述
- 手机闪存速度排行_手机很卡可能是只是因为闪存颗粒太差 EMMC UFS大对比
热门文章
- mysql 怎么加上撇号_php - 如何在写入Mysql数据库时处理撇号
- 1054: 猴子吃桃（C）
- 【深度学习NLP论文笔记】《Deep Text Classification Can be Fooled》
- 基于matlab的调用电脑摄像头，截取视频图像识别颜色
- 使用GPO(Profile-Guided Optimization)优化程序
- nrf51822 --- 动态修改连接间隔
- 为了旅游和梁定郊大吵一次，此行贿赠喜爱的朋友！！！
- 织梦二级栏目title标题去掉‘/‘斜杠和以及栏目标题的方法
- 【LOJ6570】毛毛虫计数
- 【论文精读】Parallax-Tolerant Image Stitching Based on Robust Elastic Warping