布局之路
关注
分享
扫一扫
文章平均质量分 66
来自流星
这个作者很懒，什么都没留下…
展开
-
学习布局知识（一）
link 与 @import 不同之处: <link rel="stylesheet" href="" type="text/css" media="all"/> <style> @import "/css/index.css"; </style>link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务， ...原创 2019-07-23 22:33:45 · 161 阅读 · 0 评论 -
学习布局（10）简单布局
CSS: .arc-list { width: 800px; padding: 15px 30px; } .arc-list dl { border-bottom: 1px dotted red; } .arc-list dt { ...原创 2019-07-26 10:35:25 · 207 阅读 · 0 评论 -
学习布局（7）模块布局--选择标签
<!-- 无序列表 --><ul> <li>无序列表项01</li> <li>无序列表项02</li> <li>无序列表项03</li></ul><!-- 有序列表 --><ol> <li>有序列表项01<...原创 2019-07-26 10:35:52 · 355 阅读 · 0 评论 -
学习布局（9） 加强版选择器
加强版选择器---后代选择器: 后代选择器就是使用多个选择器的组合来找到要控制的标签，不同的选择器之间使用空格分隔开#wrap p { border: 1px solid red;}加强版选择器---子代选择器: 以下的意思就是 id为 wrap中的子代p元素添加给定的样式 #wrap > p { bor...原创 2019-07-26 10:36:13 · 140 阅读 · 0 评论 -
学习布局（20） 表单
.wrap { margin: 0 auto; width:400px; padding: 20px; border: 1px solid red; } .user, .pass { height: 46px; b...原创 2019-07-31 14:22:37 · 123 阅读 · 0 评论 -
学习布局（21）HTML5新标签
HTML5新增结构元素以及含义:新增结构元素:<header> 定义页眉 <hgroup> 定义网页标题的组合 <nav> 定义导航 <section> 定义文档中的区段 <time> 定义日期和时间 <article> 定义文章 <...原创 2019-07-31 15:37:14 · 215 阅读 · 0 评论 -
学习布局（13） 超出文本的处理
内容超出的处理：overflow: visible 默认值。内容不会被裁剪，会呈现在元素框之外 hidden: 内容会被裁剪，并且多余的内容不可见 scroll: 内容会被裁剪，但浏览器会显示滚动条以便查看其他内容 auto: 如果内容被裁剪，浏览器会显示滚动条 inherit: 从父元素继承overflow属性值x 和 y 两个方向的控制：...原创 2019-07-26 16:23:54 · 377 阅读 · 0 评论 -
学习布局（11）a标签和锚链接
a标签: 超链接:是互联网的核心技术，也是一个网站的灵魂，各个单独的网页之间，需要依靠a标签进行跳转网页必须通过超链接之后，才能构成一个网站。超链接的属性：href：a元素最重要的属性，用于指示链接的目标外部链接: 有效链接 <a href="http://www.baidu.com">百度</a> 内部链接: <a href="../in...原创 2019-07-26 10:46:44 · 1023 阅读 · 0 评论 -
学习布局知识（14）开发完整的布局
引入reset.css/** 整体布局 列表项的父级不能设置固定高度 */ .arc-list { width: 676px; padding: 14px 50px; } .arc-con { overflow: hidden; } .arc-list dl { margin-top: -1px; border-...原创 2019-07-26 23:32:24 · 128 阅读 · 0 评论 -
学习布局知识（19）table
表格:优点： 使用table布局能够很好的兼容处理各个浏览器的兼容，布局错乱。 缺点: 层层嵌套导致网页的嵌套深度太深，代码量过大，从SEO角度而言，table是数据表展示，而非用于布局工具table各类元素以及其用法： table 定义一个表格 col 定义表格的列 caption: 定义表格的标题 colgroup 定义表格的列祖 thead: 定义表格的头部区域 ...原创 2019-07-30 23:14:22 · 697 阅读 · 0 评论 -
学习布局（三）浮动
引入reset.css：@charset "UTF-8";html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,butt...原创 2019-07-24 16:49:01 · 159 阅读 · 0 评论 -
学习布局（四）浮动的影响
文档流：普通流，也可以称之为常规流、文档流。 普通流式文档中可显示对象在排列时所占用的位置。可以将整个网页看做一个文档，这个文档自上而下分成一行一行，并在每行中按照从左至右，依次排放元素。脱离文档流： 设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，如果包含框内部不存在其他普通流元素，也就是产生高度为0的现象（高度塌陷），如果有其他普通元素，依...原创 2019-07-24 17:40:24 · 205 阅读 · 0 评论 -
学习布局（五）清除浮动
浮动 -- clear属性 clear:both 设置元素左右两侧均不允许存在浮动元素清除浮动: 不是把浮动元素删掉,而是取消掉浮动元素效果,对其他元素造成的影响 。清除浮动的不同类型：防止浮动元素引起的兄弟级元素布局影响 防止浮动元素引起的高度塌陷为兄弟元素设置clear样式 ： 第二个div发生了浮动，这个时候第三个div元素布局可能受...原创 2019-07-24 21:58:48 · 222 阅读 · 0 评论 -
学习布局（15） 段落类的样式
line-height: 设置元素当中的每行文本的行高（行间距） .test { width: 300px; height: 40px; margin-bottom: 20px; padding: 10px; background-color:...原创 2019-07-30 10:12:57 · 262 阅读 · 0 评论 -
学习布局（16）字体类样式
color: 设置元素的文本颜色font-family: 规定元素的字体系列 中文界面: 建议以宋体、雅黑为首选 英文界面: 建议使用Arial、Tahoma font-family: Arial, 'Microsoft YaHei'; 多个字体使用，隔开。font-size: 规定元素的字体尺寸大小 length 和 % 两种属性值，是平时开发中会使...原创 2019-07-30 10:56:42 · 220 阅读 · 0 评论 -
学习布局（22） 布局Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标签选择</title> <link href="../css/reset.css"> <style> .a...原创 2019-08-02 17:33:03 · 157 阅读 · 0 评论 -
学习布局（17） 特殊布局---定位布局
特殊布局情况----- 定位布局 HTML+CSS布局方式之中，最常见的两种布局模式是，浮动布局和定位布局当页面中出现多个元素定位-----position属性： 为一个元素设置位置区域position: static 默认值position: absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位 元素通过...原创 2019-07-30 14:55:15 · 310 阅读 · 0 评论 -
学习布局（21） CSS3实现圆角
实现如下图所示： .box { width: 0; height: 0; border: 30px solid transparent; border-top-color: red; ...原创 2019-08-01 12:12:32 · 288 阅读 · 0 评论