【免费】css正确的语法css正确的布局资源-CSDN下载

共16个文件

html：16个

需积分: 0 24 浏览量 2022-12-07 17:23:37 上传评论收藏 14KB ZIP 举报

在网页设计领域，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的关键技术。正确理解和使用CSS语法对于创建美观、响应式的网站至关重要。本文将深入探讨CSS的正确语法以及如何实现有效的布局。让我们从CSS的基本语法开始。CSS由选择器和声明组成。选择器指向我们想要应用样式的HTML元素，而声明则定义了这些元素的属性和值。例如： ```css p { color: red; font-size: 16px; } ``` 在这个例子中，`p`是选择器，它选择了所有的段落元素。`color: red;`和`font-size: 16px;`是两个声明，分别设置了文字颜色和字体大小。 CSS中的属性名总是以冒号（:）结束，每个声明之间用分号（;）隔开。为了保持代码的可读性，通常建议每行只写一个声明。接下来，我们讨论CSS的层次结构。CSS具有层叠性，这意味着当多个规则应用于同一个元素时，浏览器会根据来源、特异性以及声明顺序来决定使用哪个规则。例如，内部样式表（在`<style>`标签内）的权重高于外部样式表，而行内样式（在HTML元素的`style`属性中）的权重最高。布局是CSS中另一个重要的方面。CSS提供了多种布局方式，包括： 1. **盒模型**：每个HTML元素都可以看作一个盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是控制元素尺寸和间距的基础。 2. **定位**：通过`position`属性（如`static`、`relative`、`absolute`、`fixed`），我们可以控制元素相对于其正常流位置或者相对于其他元素的位置。 3. **Flexbox**：用于创建灵活的、单轴布局。主要属性有`display: flex;`、`flex-direction`、`justify-content`、`align-items`等。 4. **Grid布局**：适用于创建复杂的二维布局。关键属性有`display: grid;`、`grid-template-columns`、`grid-template-rows`、`grid-gap`等。 5. **浮动**：虽然现在主要用于图像布局，但`float`属性曾是创建多列布局的传统方法。 6. **响应式设计**：使用媒体查询（`@media`）来根据设备特性调整布局，确保在不同屏幕尺寸下都能良好显示。正确运用这些布局技术可以创建出适应各种屏幕尺寸和用户需求的网站。要注意CSS预处理器，如Sass（SCSS）和Less，它们提供变量、嵌套规则、混合等功能，使编写和维护大型CSS项目更加高效。总结，掌握CSS的正确语法和布局技巧是成为一名优秀前端开发者的基石。从基本选择器和声明开始，理解CSS的层叠性和布局机制，再到运用现代布局方法如Flexbox和Grid，以及善用CSS预处理器，都能帮助你创建出更具吸引力和功能性的网站。不断学习和实践，你将在CSS的世界里游刃有余。

资源推荐

资源详情

资源评论

收起资源包目录

css正确的语法.zip （16个子文件）

css正确的语法

1、CSS基础布局-行布局

7、行布局导航随屏幕滚动.html 1KB

1、基础的行布局.html 468B

4、行布局垂直水平居中.html 574B

5、行布局固定宽.html 1KB

2、行布局自适应.html 859B

6、行布局某部位自适应.html 1KB

3、行布局自适应限制最大宽.html 889B

3、混合、圣杯、双飞翼布局

1、混合布局固定.html 1KB

2、灵活布局.html 5KB

1、双飞翼布局.html 2KB

圣杯布局.html 2KB

2、混合布局自适应.html 2KB

2、CSS基础布局-多列布局

1、两列布局固定.html 774B

3、三列布局固定.html 930B

4、三列布局自适应.html 837B

2、两列布局自适应.html 632B

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局</title> <style type="text/css"> body {background-color: #ffffff; font-size:14px;} #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;} .main {background-color: #03a9f4; color:#ffffff;} .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;} p {margin:0; padding:20px; text-align: center;} /* 左侧栏固定宽度，右侧自适应 */ .bd-lft { zoom:1; overflow:hidden; padding-left:210px; } .bd-lft .aside { float:left; width:200px; margin-left:-100%; /*= -100%*/ position:relative; left:-210px; /* = -parantNode.paddingLeft */ _left: 0; /*IE6 hack*/ } .bd-lft .main { float:left; width:100%; } /* 右侧栏固定宽度，左侧自适应 */ .bd-rgt { zoom:1; overflow:hidden; padding-right:210px; } .bd-rgt .aside { float:left; width:200px; margin-left:-200px; /* = -this.width */ position:relative; right:-210px; /* = -parantNode.paddingRight */ } .bd-rgt .main { float:left; width:100%; } /* 左中右三栏自适应 */ .bd-3-lr { zoom:1; overflow:hidden; padding-left:210px; padding-right:210px; } .bd-3-lr .main { float:left; width:100%; } .bd-3-lr .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*IE6 hack*/ } .bd-3-lr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; right: -210px; } /* 都在左边，右侧自适应 */ .bd-3-ll { zoom:1; overflow:hidden; padding-left:420px; } .bd-3-ll .main { float:left; width:100%; } .bd-3-ll .aside-1 { float: left; width:200px; margin-left: -100%; position:relative; left: -420px; _left: 0px; /*IE6 hack*/ } .bd-3-ll .aside-2 { float: left; width:200px; margin-left: -100%; position:relative; left: -210px; _left: 210px; /*IE6 hack*/ } /* 都在右边，左侧自适应 */ .bd-3-rr { zoom:1; overflow:hidden; padding-right:420px; } .bd-3-rr .main { float:left; width:100%; } .bd-3-rr .aside-1 { float: left; width:200px; margin-left: -200px; position:relative; right: -210px; } .bd-3-rr .aside-2 { float: left; width:200px; margin-left: -200px; position:relative; right: -420px; } </style> </head> <body> <div id="hd">头部</div> <div class="bd-lft"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside"> <p>侧边栏固定宽度</p> </div> </div> <div class="bd-rgt"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside"> <p>侧边栏固定宽度</p> </div> </div> <div class="bd-3-lr"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside-1"> <p>侧边栏1固定宽度</p> </div> <div class="aside-2"> <p>侧边栏2固定宽度</p> </div> </div> <div class="bd-3-ll"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside-1"> <p>侧边栏1固定宽度</p> </div> <div class="aside-2"> <p>侧边栏2固定宽度</p> </div> </div> <div class="bd-3-rr"> <div class="main"> <p>主内容栏自适应宽度</p> </div> <div class="aside-1"> <p>侧边栏1固定宽度</p> </div> <div class="aside-2"> <p>侧边栏2固定宽度</p> </div> </div> <div id="ft">底部</div> </body> </html>

评论收藏

内容反馈