本文为b站视频《尚硅谷前端基础教程(含css3+html5)》课堂笔记整理,笔记以代码形式呈现,包含网页渲染后截图并整理成文字版本便于观看。一、列表1.平常的列表            1.铅笔            2.橡皮                   
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-29 11:17:12
                            
                                62阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            布局的分类 a.静态布局:限制死宽高的网站传统web设计,不管浏览器具体是多少,网页的布局就一直会按照最开始的布局来显示。特点:固定死宽高。
 b.自适应布局:根据不同显示分辨率各设置一套样式,让元素的大小不变 位置可变(但是如果继续缩小 该页面还是会出现滑动条,样式是固定px 没用百分比) 定义:就是为不同的屏幕分辨率来定义不同的布局,并且在每个布局中页面元素不随窗口的大小而改变。其实质可以看做            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-19 00:50:37
                            
                                521阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            说说图文列表的布局       没错,就是这样简单的布局。分了4列,你会想到什么呢?百分比?还是PX我自己还是喜欢用百分比,不知你们是如何使用。接下来说说我的做法!!顶部的排序,就弄个色块吧。  
    默认|价格|销量|人气 
     这里是列表  CSS:.container {
width: 1200px;
margin: auto;
}
.sort-warp {
height: 40p            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-12-02 12:53:30
                            
                                157阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            一. 静态布局静态布局就是每一个元素都用px写死。这种布局方法毫无疑问是最简单(因为不用考虑不同分辨率的情况),同时也是最糟糕的。不过,现代大多数企业的PC站点先使用一个静态布局,然后移动端再单独设计一个布局。 二. 弹性布局弹性布局采用高级的度量单位(如em, rem)来度量文字的大小,其它采用px来进行度量。这样做得好处是,在其它元素不变的情况下,我们的文字可以根据具体的分辨率放大和            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-06-12 23:07:54
                            
                                880阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            定位内容position属性设置元素的定位方式以下是该属性的值值说明static默认值,普通布局relative元素位置相对于static定位absolute元素相对于position值不为static的第一位祖先元素定位fixed元素相对于浏览器窗口定位在设置了position之后,用top/left/right/bottom来指定元素的偏移量z-index指定元素的层叠顺序,值越小层叠顺序越靠            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-23 17:26:37
                            
                                169阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            组织结构图(Organization chart)是企业的流程运转、部门设置及职能规划等最基本的结构依据。和客户交流时,不少人都提到需要一个灵活的工具来绘制呈现企业的组织架构,今天就给大家带来一款用TWaver实现的组织结构图,提供多种布局方式,为了清晰呈现组织里每个人的职能,我们定制了名片样式来展示网元。首先来看下整体的效果,是上下布局的样式:也可以调整为圆形布局: 这些布局用twav            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-27 12:44:46
                            
                                193阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法。大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将整体的布局分拆成为各个部分的布局。在html5中我们可以省去更多的时间对盒子的属性进行设置。下面两图是对传统方法与HTML5布局方法的对比,可以看出,两种方法都能实现我们的设计思想。 &nbs            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-11-19 11:22:31
                            
                                97阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            HTML5+CSS3学习笔记(九) 文章目录HTML5+CSS3学习笔记(九)一、文档流布局二、浮动布局三、定位布局四、表格布局五、弹性布局1. 弹性容器特点2. 设置弹性容器属性值3. 设置弹性子元素(弹性项)属性值六、网格布局1. 网格容器特点2. 设置网格容器属性值3. 设置网格子元素(网格项)属性值4. 利用命名进行布局结尾 一、文档流布局块级元素自上至下垂直排列,行内元素自左至右水平排列            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-12 17:46:22
                            
                                277阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            HTML5网页布局应注意什么?下面就跟着小编一起来看看HTML5网页布局应该注意的三点事项。HTML5中的CSS3特效样式、Canvas、webgl的介入,不仅加强了网页的视觉效果,同时提高了用户体验。很多小伙伴在学习之初都会学习HTML5和CSS3的内容,还会做一些网页设计,以下就是HTML5学习经验分享。一阶段我们学习了四个礼拜,主要是学习了HTML、CSS2以及HTML5、CSS3的内容。对            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-19 00:44:16
                            
                                263阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            页面整体布局1.单列布局特征:定宽、水平居中常见的单列布局有两种:  1. header、content、footer宽度都相同,其一般不会占满浏览器的最宽宽度,但当浏览器宽度缩小低于其最大宽度时,宽度会自适应。  <div class="layout">
    <div id="header"></div>
    <div id="container            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-26 10:31:34
                            
                                43阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            最近在学习css的时候会经常用到左右布局。所以会先建立一个div容器,里面添加图形和文本  效果图如下。 于是第一步会先建立一个div,然后在内部添加两个div。<div class="item-box">
    <div class="item-box-icon">
    </div>      
    <div class="item-box-            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-11-13 10:38:30
                            
                                116阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            每当我们去进行前端页面布局时都会用到float、position、margin等一些属性,这些属性用起来略显麻烦,并且浏览器去进行渲染时会大大消耗性能所以今天我们来谈谈最新的 flex布局,也叫弹性布局!需要注意的是任何容器都可以指定为flex布局,但是在flex布局中float、clear、vertical-align都会失效。主轴方向flex容器分为x轴与y轴,x轴正方向默认从左至右,y轴正方            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-21 14:32:09
                            
                                90阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            完整示例 页眉和页脚 导航 文章 附属信息 部分 标题组 图形 分节元素 为块级元素添加链接            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-14 09:53:47
                            
                                359阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            HTML是用于开发网页的“超文本标记语言”,今天我们一起来学习一下HTML+CSS网页布局中Table布局方式。常见的网页布局用CSS而言一般有经典行布局、经典列布局、双飞翼布局、圣杯布局等。今天小编教大家用Table表格布局。大家先来欣赏几个网页:这几个网页布局都挺好看的对吧,不过今天我们不深究网页如何做到那么好看,我们仅仅做网页如何布局。来看这张图:这个网页效果就是我们今天要做的。首先,我们仔            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-17 22:25:33
                            
                                72阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果。此时,一个全新的概念——响应式布局应运而生!它的诞生为我们的移动端布局带来了很大的便利,因此学习响应式页面布局势在必行!01响应式页面布局的概念响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-26 11:02:42
                            
                                170阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.前言在html5之前,网页当中实现拖拽要借助到js中的 (onmousedown+onmousemove),现在html5内部就支持了拖拽的功能,结合js能            
                
         
            
            
            
            CSS3 多列布局CSS3新增了一种布局方式——多列布局。使用多列布局,可以轻松实现类似报纸那样的布局。 多列布局的应用非常广泛,像各大电商网站、素材网站中常见的“瀑布流效果”。column-count属性来定义多列布局的列数。 column-width属性来定义多列布局中每一列的宽度。 column-gap属性来定义列与列之间的间距。column-rule属性来定义列与列之间            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-10-21 21:53:09
                            
                                198阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1. 列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体。2. HTML中列表标签的分类- 无序列表(最多)(unordered list)(格式:ul>li)注意点:1)ul标签和li标签是一个整体,是一个组合,所以一般情况下ul标签和li标签都是一起出现的,不会单个出现,也就是说不会单独使用一个ul标签或者一个li标签,都是结合一起使用的。2)不推荐            
                
         
            
            
            
            html - 列表标签一、无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签;每个列表项始于 <li> (列表项内部可以使用段落、换行符、图片、链接以及其他列表等)。具体事例:<ul>      <li>列表项1</li>                
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-10-10 10:48:28
                            
                                39阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写;(个人看法)本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是个人看法,各位大牛多多拍砖。。。。。 1.布局肯定使用的是自适应布局,前提是将body的width height 设置成100%;2.准备好通用的reset.css,移除浏览器的默认样式,使用            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-07-19 21:10:08
                            
                                115阅读
                            
                                                                             
                 
                
                                
                    