美化网页元素

最新推荐文章于 2023-10-07 11:24:02 发布
最新推荐文章于 2023-10-07 11:24:02 发布
阅读量283 收藏 1
点赞数 1
分类专栏： 前端 # css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Q1575290554/article/details/125477110
版权
前端 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
css
7 篇文章 0 订阅
订阅专栏

1、为什么要美化网页

1、有效的传递网页信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>span标签</title>
    <style>
        .title1{font-size: 50px;}
    </style>
</head>
<body>
努力学习<span class=""title1"">java</span>
</body>
</html>

2、字体样式

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>字体样式</title>
    <!--
    font-family:字体
    font-size:  字体大小
    font-weight:字体粗细
    color:      字体颜色
    -->
    <style>
        body{font-family: 楷体;;}
        h1{font-size: 50px;}
        p{font-weight: bolder;}
    </style>
</head>
<body>

<h1>故事介绍</h1>
<p>平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！</p>
<p>魁拔的每一次出现，都会给元泱境界带来巨大的灾难！</p>
<p>即便是天界的神族，也在劫难逃。</p>
<p>在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。</p>
<p>魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。</p>
<p>但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。</p>
<p>很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。</p>
<p>因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
</body>
</html>

3、文本样式

1、颜色：color，rgb，rgba

2、文本对齐方式：text-align: center;

3、首行缩进：text-indext: 2em;

4、**行高：**line-height: 100px; 单行文字上下居中！line-height = height

5、下划线：text-decoration: ;

6、文本图片水平对齐：vertical-align: middle;

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>文本样式</title>
    <!--
    颜色：
        单词
        RGB 0~F
        RGBA A 0~1
    text-align ：排版，居中
    text-indent: 2em;   段落首行缩进
    -->
    <style>
        h1{
            color: chartreuse;
            text-align: center;
        }
 		 /*下划线，上划线，中划线*/
         /* text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;*/
        p{text-indent: 2em;}
        /*超链接去下划线*/
        a{text-decoration: none;}
        img,span{vertical-align: middle;}
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p>平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！</p>
<p>魁拔的每一次出现，都会给元泱境界带来巨大的灾难！</p>
<p>即便是天界的神族，也在劫难逃。</p>
<p>在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。</p>
<p>魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。</p>
<p>但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。</p>
<p>很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。</p>
<p>因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p>
    <img src=""image/1.jpeg"" alt="""">
    <span>住在山里真不错</span>
</p>
</body>
</html>

4、阴影

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>盒子阴影</title>
    <!--box-shadow: 宽 高 模糊度 颜色-->
    <style>
        img{
            margin: 0 auto;
            border-radius: 75px;
            box-shadow: 10px 10px 100px green;
        }
/*        div{
            width: 100px;
            height: 100px;
            border: 10px solid green;
            box-shadow: 10px 10px 100px brown;
        }*/
    </style>
</head>
<body>
<div></div>
<img src=""image/1.jpeg"" alt=""猫"">
</body>
</html>

5、超链接伪类

/* 未访问的链接 */
a:link {color: #FF0000}
/* 已访问的链接,点击之后的状态*/
a:visited {color: #00FF00}
/* 鼠标移动到链接上,鼠标悬浮的状态*/
a:hover {color: #FF00FF}
/* 选定的链接,鼠标按住未释放的状态*/
a:active {color: #0000FF}
<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>超链接伪类</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态,只需要记住 hover*/
        a:hover{
            font-size: 30px;
            color: chartreuse;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: brown;
        }
    </style>
</head>
<body>
<a href=""#"">
    <img src=""image/1.jpeg"" alt=""猫"">
</a>
<p>
    <a href=""#"">布偶猫</a>
</p>
<p>
    <a href=""#"">卖家：夜空</a>
</p>
<p>
    售价：$999
</p>
</body>
</html>

6、列表

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>列表</title>
    <link rel=""stylesheet"" href=""css/style.css"">
</head>
<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>

7、背景

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>背景</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url(""image/1.jpeg"");
            /*默认是全部平铺的 repeat*/
        }
        /*水平平铺*/
        .div1{
            background-repeat: repeat-x;
        }
        /*垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        /*不平铺*/
        .div3{
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>

<div class=""div1""></div>
<div class=""div2""></div>
<div class=""div3""></div>

</body>
</html>

8、渐变

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>Title</title>

    <!--径向渐变，圆形-->
    <style>
        body{
            background-color: #FFFFFF;
            background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
        }
    </style>
</head>
<body>
</body>
</html>
q1575290554
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 美化网页元素.pdf
08-11
CSS 美化网页元素 CSS 美化网页元素是指使用 CSS 语言来美化网页元素，使网页更加美观、吸引用户，提高用户体验。CSS 美化网页元素可以通过设置字体样式、文本样式、背景样式、列表样式、超链接伪类等来实现。 一...
第五章CSS3美化网页元素.md
10-16
第五章CSS3美化网页元素.md
WinForm 窗体属性 窗体美化
bluecard2008的博客
12-29 766
WinForm是·Net开发平台中对Windows Form的一种称谓。 Windows窗体的一些重要特点如下： 功能强大：Windows窗体可用于设计窗体和可视控件，以创建丰富的基于Windows的应用程序。 操作方便：新的数据提供程序管理：数据提供程序管理提供易于连接OLEDB和ODBC数据源的数据控件，包括Microsoft SQL Server、Microsoft Access、Jet、D...
CSS——美化网页
Java学不会的博客
05-20 2927
文章目录1、字体样式2、文本样式 为什么要美化网页？ 1、有小的传递页面信息 2、美化网页、页面漂亮、才能吸引用户 3、突显页面的主题 4、提高用户的体验 span标签（重点要突出的字，使用span套起来） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
3.美化网页
jmz98的博客
05-16 524
h-shadow 必须。v-shadow 必须。定义：对HTML列表进行样式的设置。定义：选择鼠标移到链接的样式。
前端开发必学之——CSS
最新发布
weixin_66207170的博客
10-07 69
CSS:层叠级联样式表 （表现）美化网页 ~（字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动......）
CSDN 界面布局优化
要学就学灰太狼的博客
09-02 1226
csdn界面优化...
HTML5+CSS3网页设计-第五章 使用CSS美化网页元素.pptx
12-21
本章主要探讨如何使用CSS3来美化网页元素，包括字体样式、文本样式、超链接样式、列表样式、背景样式以及渐变效果。下面我们将深入讲解这些知识点。 首先，我们来看CSS中用于突出文本的标签和属性。`<span>`标签常...
jQuery+CSS3网页表单元素美化代码
06-10
这些技术在美化表单输入框、按钮、选择框等元素时非常有用，可以提高网页的整体视觉吸引力。 jQuery则作为一个强大的JavaScript库，简化了DOM操作、事件处理和动画创建。在这个项目中，jQuery可能被用来绑定事件...
网页美化工具
04-27
综上所述，“wangyemeigong”这个主题涵盖了网页美化工具和技巧的广泛领域，包括色彩设计、布局构建、图形元素应用、字体选择、交互设计和响应式开发。熟练掌握这些知识点，能帮助网页设计师创造出更具吸引力和用户...
网页美化教程14
03-05
浅显易懂，空间占用小！
HTML+CSS 主页面美化的详细过程及全部代码（美化导航栏+文本框+按钮）
Rover95的博客
07-21 3万+
效果图： 原界面： 先放原界面的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WEATHER</title> </head> <body id="weather" style="text-align: center; padding: 5px; backgr
美化CSDN界面，整洁打印
zhenaxin的博客
05-28 535
简化CSDN界面（去广告，设置背景），整洁打印 美化CSDN界面，整洁打印一、安装一个CSDN界面优化插件二、打印CSDN文章： 一、安装一个CSDN界面优化插件 现在csdn的体验越来越差了。广告也多。 不过这年头没人不装拦广告插件了吧~ 【https://blog.csdn.net/qq_40881680/article/details/82226562】 装个插件补救一下。 需要先安装油猴插件 http://www.tampermonkey.net 下载地址 https://greasyfork.o
web实验使用css美化设计页面,第3章 Web应用网页美化——CSS3.pptx
weixin_28871989的博客
08-04 343
人民邮电出版社;CSS基础CSS语法;3.1.1 了解CSS3.1.2 创建CSS;1．CSS简介：“层叠”是指对同一元素或页面应用多个样式，CSS中的样式形成一个层次结构，规则的优先级由该层次结构决定。2．CSS的优势(1)语法简单、编写容易(2)增加网页设计弹性，网页易于维护(3)网页加载速度提高(4)统一网站风格;3．CSS3的新功能;1．CSS基本格式：由选择器和样式规则组成，规则由属...
如何美化你的页面？带你认识css
weixin_33796177的博客
05-27 416
什么是css呢？css是指层叠样式表(CascadingStyleSheets)，简单来说就是帮你美化页面的。如上图所示，在head标签下面写一对"style"标签。这个"style"标签就是用来写css样式的，把你写的样式放到这对标签里他才会生效。格式就像“选择器{样式名1：样式；样式名2：样式；}”这样。 咱们的网页都是要经过浏览器渲染的，才会出现不同的样式，所以你...
前端のCSS（二）美化网页
rush_peng的博客
10-24 421
文章目录1.CSS 的作用和字体样式2.文本格式3.列表样式练习4.背景图片应用及渐变5.盒子模型5.1边框的使用5.2外边距 1.CSS 的作用和字体样式 span标签 span 和 div 是两个习惯用来更改字体样式的 <span> </span> <div> </div> <style> body{ /* 字体的样式 */ font-family: 楷体;
静态内容（页面HTML+CSS美化）
热门推荐
weixin_42091562的博客
04-30 3万+
HTML静态页面开发步骤：1）创建工程，java Web工程在New中选择Web创建Dynamic Web Project。拓展：java工程和java web工程有什么不同？不同：a）  图标，java工程只有 ，java Web工程有两个 b） 目录结构不同：JAVA工程 src（存放类）java web工程，目录规范要求，约定大于配置。src （存放类，如果类写完保存，eclipse会自动编...
网页美化指南：色彩与元素的应用
这堂课旨在帮助学习者掌握美化网页的基本技巧，包括色彩搭配、背景设置、音乐插入和动态元素的应用，从而提升网页的美感和功能性。通过实践练习，学习者可以更好地理解和运用这些知识点，提高自己的网页设计能力，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值