css
文章平均质量分 66
来自流星
这个作者很懒,什么都没留下…
展开
-
学习布局知识(19)table
表格:优点: 使用table布局能够很好的兼容处理各个浏览器的兼容,布局错乱。 缺点: 层层嵌套导致网页的嵌套深度太深,代码量过大,从SEO角度而言,table是数据表展示,而非用于布局工具table各类元素以及其用法: table 定义一个表格 col 定义表格的列 caption: 定义表格的标题 colgroup 定义表格的列祖 thead: 定义表格的头部区域 ...原创 2019-07-30 23:14:22 · 641 阅读 · 0 评论 -
学习布局(17) 特殊布局---定位布局
特殊布局情况----- 定位布局 HTML+CSS布局方式之中,最常见的两种布局模式是,浮动布局和定位布局当页面中出现多个元素定位-----position属性: 为一个元素设置位置区域position: static 默认值position: absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位 元素通过...原创 2019-07-30 14:55:15 · 291 阅读 · 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 · 143 阅读 · 0 评论 -
学习布局(16)字体类样式
color: 设置元素的文本颜色font-family: 规定元素的字体系列 中文界面: 建议以宋体、雅黑为首选 英文界面: 建议使用Arial、Tahoma font-family: Arial, 'Microsoft YaHei'; 多个字体使用,隔开。font-size: 规定元素的字体尺寸大小 length 和 % 两种属性值,是平时开发中会使...原创 2019-07-30 10:56:42 · 199 阅读 · 0 评论 -
学习布局(15) 段落类的样式
line-height: 设置元素当中的每行文本的行高(行间距) .test { width: 300px; height: 40px; margin-bottom: 20px; padding: 10px; background-color:...原创 2019-07-30 10:12:57 · 235 阅读 · 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 · 178 阅读 · 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 · 112 阅读 · 0 评论 -
学习布局(11)a标签和锚链接
a标签: 超链接:是互联网的核心技术,也是一个网站的灵魂,各个单独的网页之间,需要依靠a标签进行跳转网页必须通过超链接之后,才能构成一个网站。超链接的属性:href:a元素最重要的属性,用于指示链接的目标外部链接: 有效链接 <a href="http://www.baidu.com">百度</a> 内部链接: <a href="../in...原创 2019-07-26 10:46:44 · 975 阅读 · 0 评论 -
学习布局(13) 超出文本的处理
内容超出的处理:overflow: visible 默认值。内容不会被裁剪,会呈现在元素框之外 hidden: 内容会被裁剪,并且多余的内容不可见 scroll: 内容会被裁剪,但浏览器会显示滚动条以便查看其他内容 auto: 如果内容被裁剪,浏览器会显示滚动条 inherit: 从父元素继承overflow属性值x 和 y 两个方向的控制:...原创 2019-07-26 16:23:54 · 350 阅读 · 0 评论 -
学习布局(21)HTML5新标签
HTML5新增结构元素以及含义:新增结构元素:<header> 定义页眉 <hgroup> 定义网页标题的组合 <nav> 定义导航 <section> 定义文档中的区段 <time> 定义日期和时间 <article> 定义文章 <...原创 2019-07-31 15:37:14 · 192 阅读 · 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 · 105 阅读 · 0 评论 -
学习布局(9) 加强版选择器
加强版选择器---后代选择器: 后代选择器就是使用多个选择器的组合来找到要控制的标签,不同的选择器之间使用空格分隔开#wrap p { border: 1px solid red;}加强版选择器---子代选择器: 以下的意思就是 id为 wrap中的子代p元素添加给定的样式 #wrap > p { bor...原创 2019-07-26 10:36:13 · 124 阅读 · 0 评论 -
学习布局(7)模块布局--选择标签
<!-- 无序列表 --><ul> <li>无序列表项01</li> <li>无序列表项02</li> <li>无序列表项03</li></ul><!-- 有序列表 --><ol> <li>有序列表项01<...原创 2019-07-26 10:35:52 · 334 阅读 · 0 评论 -
学习布局(五)清除浮动
浮动 -- clear属性 clear:both 设置元素左右两侧均不允许存在浮动元素清除浮动: 不是把浮动元素删掉,而是取消掉浮动元素效果,对其他元素造成的影响 。清除浮动的不同类型:防止浮动元素引起的兄弟级元素布局影响 防止浮动元素引起的高度塌陷为兄弟元素设置clear样式 : 第二个div发生了浮动,这个时候第三个div元素布局可能受...原创 2019-07-24 21:58:48 · 199 阅读 · 0 评论 -
学习布局(四)浮动的影响
文档流:普通流,也可以称之为常规流、文档流。 普通流式文档中可显示对象在排列时所占用的位置。可以将整个网页看做一个文档,这个文档自上而下分成一行一行,并在每行中按照从左至右,依次排放元素。脱离文档流: 设置浮动的元素会脱离文档流,浮动的元素,并不属于文档中的普通流,如果包含框内部不存在其他普通流元素,也就是产生高度为0的现象(高度塌陷),如果有其他普通元素,依...原创 2019-07-24 17:40:24 · 181 阅读 · 0 评论 -
CSS3 box-sizing 属性
规定两个并排的带边框的框:div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;float:left;}浏览器支持Firefox 支持替代的 -moz-box-sizing 属性。Internet E...转载 2018-05-30 15:28:19 · 91 阅读 · 0 评论 -
[HTML]table选中行效果
比如是这样一个结构的table<table id="tUsers"> <thead> <tr> <td>序号</td> <td>帐号</td> <td>密码<转载 2018-05-28 14:36:12 · 5447 阅读 · 0 评论 -
给div加边框和颜色
div{ width:200px; height:100px; border:solid 10px #f00 }转载 2018-05-16 11:08:39 · 19506 阅读 · 0 评论 -
CSS overflow 属性
实例设置 overflow 属性:div { width:150px; height:150px; overflow:scroll; }浏览器支持所有主流浏览器都支持 overflow 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。定义和用法overflow 属性规定当内容溢出元素框时发生的事情。说明这个属性定...转载 2018-05-16 11:06:42 · 114 阅读 · 0 评论 -
CSS display 属性
浏览器支持IEFirefoxChromeSafariOpera 所有主流浏览器都支持 display 属性。注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"ta转载 2018-05-31 09:47:04 · 202 阅读 · 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 · 140 阅读 · 0 评论 -
学习布局知识(一)
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 · 147 阅读 · 0 评论 -
CSS清除浮动
什么是CSS清除浮动?在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。使用CSS的:after伪元素结合 :after 伪元素(注意这...转载 2018-05-31 09:46:31 · 136 阅读 · 0 评论 -
CSS 子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。选择子元素如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:h1 > strong {color:red;}这个规则会把第一个 h1 下面的两...转载 2018-05-31 09:46:45 · 155 阅读 · 0 评论 -
CSS vertical-align 属性
实例垂直对齐一幅图像:img { vertical-align:text-top; }浏览器支持所有浏览器都支持 vertical-align 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。定义和用法vertical-align 属性设置元素的垂直对齐方式。说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐...转载 2018-05-31 09:46:55 · 187 阅读 · 0 评论 -
学习布局(21) CSS3实现圆角
实现如下图所示: .box { width: 0; height: 0; border: 30px solid transparent; border-top-color: red; ...原创 2019-08-01 12:12:32 · 270 阅读 · 0 评论