CSS和DIV的高级应用

最新推荐文章于 2023-12-21 20:36:01 发布

「已注销」

最新推荐文章于 2023-12-21 20:36:01 发布

阅读量194

点赞数

分类专栏： CSS DIV web前端开发文章标签： CSS应用

本文链接：https://blog.csdn.net/qq_43711677/article/details/102488795

版权

web前端开发同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

DIV

4 篇文章 0 订阅

订阅专栏

CSS属性值中的单位

1.绝对单位

很少使用但在某些特殊场合下也是必要的。
英寸（in），厘米（cm），毫米（mm），磅（pt）。

2. 相对单位

1.em表示元素的字体高度，它能根据字体的大小来确定单位的大小。
2.ex表示小写字母x的高度。
3.px根据屏幕的像素点来确定。
4.%是一个相对单位值。

CSS字体样式（只介绍不常见的）

1.font-style字样
属性值：normal/italic/oblique 默认值/斜体显示文字/倾斜字体
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font-style</title>
    <style type="text/css">
        #p1{font-size:20px;font-style:normal;font-family:宋体;}
        #p2{font-size:200%;font-style:italic;font-family:楷体,隶书;}
        #p3{font-size:x-small;font-style:oblique;font-family:楷体,宋揩体;}
    </style>
</head>
<body>

<p id="p1">这是默认字体</p>
<p id="p2">这是字体倾斜显示</p>
<p id="p3">这是倾斜字体</p>

</body>
</html>

2.字体变体font-variant不重要。

CSS精细排版样式

CSS背景与颜色

CSS列表样式

代码如下：

<body style="background-color: #cad9ea;
 background-image: url(CSS文件/Pictures/学习.jpg);
 background-repeat: no-repeat;
 background-size: cover;
background-attachment: fixed">
<h1 class="h1">Web前端开发技术<br>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--HTML5，CSS3,JavaScript</h1><br>
<!--用段落展示教学大纲-->
<!-- 改进用列表展示教学大纲-->
     <h2 align="center" style="font-family: 隶书 ;font-size: 34px">教学大纲浏览：</h2>
     <ul class="p1">
         <li>计算机发展的历史:</li>
         <ol>
             <li>大型机</li>
             <li>小型机</li>
             <li>服务器</li>
             <li>PC机</li>
             <li>手机</li>
             <li>智能设备</li>
         </ol>
         <li>程序设计语言:</li>
         <ol>
             <li>C++</li>
             <li>Java</li>
             <li>JavaScript</li>
             <li>Python</li>
             <li>其他语言</li>
         </ol>
         <li>应用系统:</li>
         <ol>
             <li>单机系统</li>
             <li>分布式结构</li>
             <li>嵌入式结构</li>
         </ol>
         <li>计算模式:</li>
         <ol>
             <li>分布式计算</li>
             <li>微服务</li>
         </ol>
     </ul>

     <ul class="p1">
         <p>分布式应用框架:</p>
         <li>服务器</li>
         <ol>
             <li>J2EE</li>
             <li>.net</li>
             <li>nodeJs</li>
         </ol>
         <li>前端交互</li>
         <ol>
             <li>客户端(JAVA， C客户端）</li>
             <li>&nbsp;Web前端技术</li>
             <li>APP （ISO，安卓）</li>
             <li>微信小程序、微信公众号</li>
         </ol>
     </ul>

     <ul class="p1">
         <p>Web前端技术：</p>
         <li>基础</li>
         <ol>
             <li>HTML</li>
             <li>CSS</li>
             <li>JS</li>
         </ol>
         <li>技术重点</li>
         <ol>
             <li>基本语法</li>
             <li>编程模式 ---渲染、事件、数据交互，服务请求方式，数据传输方式（JSON）</li>
             <li>组件、函数库</li>
         </ol>
         <li>应用开发框架</li>
         <ol>
             <li>Jquery</li>
             <li>React</li>
             <li>vue</li>
             <li>JSF</li>
         </ol>
         <li>应用场景</li>
         <ol>
             <li>静态网站</li>
             <li>业务管理系统</li>
             <li>电商</li>
             <li>新媒体等系统</li>
             <li>数据分析展示系统</li>
             <li>Web2D，3D</li>
         </ol>
         <li>设计相关问题</li>
         <ol>
             <li>美工设计、风格设计</li>
             <li>可用性设计、用户体验</li>
         </ol>
     </ul>

CSS盒模型

1.什么是CSS盒模型？　　W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片以及层。
2.盒子模型的重要概念：盒模型主要定义四个区域MBPC：边界(margin) 、边框(border) 、填充(padding)和内容(content) 。
填充又叫内边界是内容（content）与边框的距离，边框又称外边界是盒子与边界的距离。
大体图片：
在这里插入图片描述
3.margin边界：
margin-top：20px; margin-right ：20px;
margin-bottom ：20px; margin-left ：20px;
margin:10px; /* 4个边均为10px /
margin:10px 20px ; / 上下|左右*/
margin:10px 20px 30px; /* 上|右左|下*/
margin:10px 20px 30px 40px; /* 上|右|下|左*/

/*margin是指距离上一个元素的距离*/
        #p1{background:#99ffcc;margin-top:200px;margin-left:200px;}
        #p2{background:#99ffff;margin:20px 3px 20px;}

 <style type="text/css">
        /*border复合属性可以一次性设计边框的粗细，风格和颜色*/
        #p1{background:#99ffcc;border:15px #33ff66 groove;}
        #p2{border-style: dashed solid;}
        #p3{border-style:solid;border-width:8px 10px;}
    </style>

5.padding填充属性（内容content距离边框的距离）
padding:长度 | 百分比
padding-top、padding-right、padding-bottom:同上
padding:20px 30px 40px 60px;/**/
padding:20px 30px 40px; /* 上|右|下|左*/
padding:20px 30px; /* 上|左右|下*/
padding:20px; /* 上右下左均相同*/

 <style type="text/css">
        #p1{background:#99ffcc;padding:15px 20px 15px;}
        #p2{background:#99ff99;border-style:dashed;padding-top:0px;padding-bottom:20px;}
        #p3{background:#99cccc;border-style:solid;padding-left:50px;padding-right:20px;}
    </style>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS和DIV的高级应用

CSS属性值中的单位1.绝对单位很少使用但在某些特殊场合下也是必要的。英寸（in），厘米（cm），毫米（mm），磅（pt）。2. 相对单位1.em表示元素的字体高度，它能根据字体的大小来确定单位的大小。2.ex表示小写字母x的高度。3.px根据屏幕的像素点来确定。4.%是一个相对单位值。CSS字体样式（只介绍不常见的）1.font-style字样属性值：normal/ital...
复制链接

扫一扫

专栏目录