网站建设公司果动,临沭有做网站的吗,网站显示建设中页面,计算机网站建设文献综述第一章 一、样式 1、行间样式#xff0c;代码不可维护#xff0c;不推荐 2、内联样式#xff0c;不可重用#xff0c;不推荐 3、外联样式#xff0c;可重用#xff0c;可维护#xff0c;推荐 link relstylesheet href...css / 二、… 第一章 一、样式 1、行间样式代码不可维护不推荐 2、内联样式不可重用不推荐 3、外联样式可重用可维护推荐 link relstylesheet href...css / 二、边框 1、组成border: 1px [ solid | dashed |double ] red; 1.1 双实线的宽度用border-width: 4px; 设置 2、方向border-[ top | bottom | left | right ] 3、组合用法border-top-[ width | style | color ] 4、边框的形状 非矩形倒三角、倒梯形…… 4.1 通过边框实现三角形 .angle{width: 0;height: 0;border: 10px solid #fff;border-top-color: #ccc;/*border: 1px solid red;/*只设置一个方向的边框不可实现*//*border-top: 10px solid black;*/
} 三、背景 1、背景和内容的区别背景不占用容器宽高不可选中容会撑开容器宽高可被选中 2、常见背景样式 2.1 background-color: red; 2.2 background-image: url(../img/1.jpg); 2.3 background-repeat: [ repeat | no-repeat | repeat-x | repeat-y ] 默认平铺整个容器 2.4 background-position: x y; 2.4.1 background-position: [ left | right | center ] [ top | bottom | center] 2.4.2 当第二个值没有的时候默认yY轴居中 2.5 background-attachment: fixed背景不随滚动条滚动固定在浏览器可视区| scroll背景随着滚动条的滚动而滚动《要求背景够长》 2.6 background-size: width height; //ie8不支持 2.6.1 background-size: 100px 50%; 2.6.2 background-size: [ cover(把背景图像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。) | contain (把图像扩展至最大尺寸以使其宽度和高度完全适应内容区域。) ] 3、背景复合样式 不分属性书写顺序通常按照 颜色相关、图片相关、位置相关包含是否滚动 backgroun: red url(../img/1.jpg) no-repeat center top scroll; 四、文字 1、font-weight: [ normal | bold | bolder ]; 2、font-style: italic; 斜体 3、font-size 16px; 4、font-family: 微软雅黑 | 楷体 | ....... 5、line-height 行高当line-heightheight文字垂直居中 5.1 多行文字测量行高的方式 5.1.1 确认文字大小确认两行文字之间的大小 5.1.2 两行文字之间的大小除以2就是每行文字的上下空隙的大小。当行高为奇数时上小下大1px的原则 5.1.3 通过辅助线测量行高 6、文字复合样式需要注意书写顺序 6.1 font: bold italic 26px/50px 楷体; //26px/50px表示font-size/line-height 五、文本 1、color: red; 2、text-align: [ center | left | right ]; 3、 text-indent: 2em; 通常用em作为缩进字符单位 4、text-decoration: [ none | underline ]; 5、letter-space:10px; 字母间距不区分中英文 6、word-spacing: 10px; 单词间距以空格为解析单位 7、white-space: [ normal | nowrap ]; 强制不换行nowrap 8、测量文字大小时从上到下的方式文字是方的宽高一致但是宽中有一部分是空格《为了让文字与文字之间不会粘在一起》所以文字大小以高为准 8、空格大小字体格式为宋体时空格大小是当前文字大小的一半 字体格式不一样空格大小不一样 六、盒模型 1、padding 1.1 设置padding之后会撑大容器内容padding不包含在width里面 1.2 方向顺时针 top right bottom left padding: 10px 20px 30px 40px; 1.3 padding-bottom 无效问题 注意html文档流默认是从左往右从上往下的。现在你的文字高度不够达不到距底端10px的位置所以只有上内边距起作用下内边距没表现出其作用。 又比如当设置float:left那么margin-left直接起作用假如内部元素的宽度不够那么margin-right也可能不会表现出作用。要margin-right起作用就float:right这时margin-left又不一定表现出作用了。 就像一个房间里的人虽然规定了其同天花板的距离必须小于1米但很可能这个规定没有起作用就是这个道理。 2、margin外边距 2.1 相邻盒模型在相邻间隙中都有margin的时候虽然 各有各的margin但是最终 显示是取大原则选择大的margin作为两盒字的边距 2.2 margin问题 2.2.1 margin-top传递问题父子级包含的时候子级的margin-top会传递给父级解决办法 给父级加上border 2.2.2 margin叠压问题见2.1 2.2.3 margin-bottom 无效问题有时候需要设置某块级元素在该父类的底部显示但是此时设置margin-bottom:0; 却无效。--》 2.2.3.1 理解错了这个属性的含义它指的是你所设置的元素的下外边距但不代表它在父元素的底部也不代表它的子元素都会在它的底部显示。 margin-bottom是指该 元素与其后的兄弟节点之间的距离。 2.2.3.2 绝对定位然后设置bottom:0才有效。 2.2.3.3 如果目标元素下方没有其他同辈元素为什么margin-bottom:0不代表它在父元素的底部--》 不代表举个例子你有两个盒子要自上而下放置如果给第一个盒子设置了margin-bottom:10px那么第二个盒子会距离第一个盒子10px如果设置为0那就会紧挨着第一个当然第二个的margin-top也是设为0时margin-bottom是设置同级元素间的间隔并不是设置它在父元素中的位置。 3、盒子的大小( border padding ) * 2 width ( margin 不算 , 这里前提是左右对称 ) 4、让元素在父级的底部显示 法1. 使用bottom以及top、left和right属性但这要求该节点的position属性是absolute绝对定位且其父节点的position属性为relative相对定位则该节点即可相对其父节点定位。 第二章 一、a标签 1、超链接 2、伪类 设置顺序 L V H A防止冲突 2.1 :link 未访问过的链接的初始颜色 2.2 :visited 访问过后的颜色 2.3 :hover 鼠标移入悬停 2.4 :active 鼠标按下时的颜色 有两个div一个是#a,一个是#b能通过#a:hover来改变#b的样式吗?
1、如果你#b元素是#a元素的子元素可以直接通过 #a #b {...}
2、#a与#b是亲兄弟关系有相同的父节点且#b跟#a紧临可以通过 #a #b{..}来控制#b里面的元素样式 注加号 为相邻同胞选择器。如果需要选择 紧接在另一个元素后的元素 而且二者有相同的父元素可以使用相邻兄弟选择器 二、span标签行内区分样式时使用。 三、常用标签 1、header头部信息注意合适的时候用合适的标签全部用div--》用header等语义化标签代替 2、nav导航 3、footer底部信息 4、section版块用于划分页面上不同版块或者文章不同章节。 5、article页面中一套结构完整且独立的内容部分例如论坛中某个帖子包括楼主和所有评论较少用。 6、aside侧边栏、广告等侧边信息 7、time用来表现时间或日期 8、h1~h6标题标签最好一个页面只有一个h1标签注意 H1标签涉及到SEO问题类似于title 1、H1标签最好一个页面只用一次不要一直用。H1可以用但不要泛滥合理的使用H1标签可以给网站带来好的效果而使用的不恰当会给网站带来不利影响严重的甚至会导致K站。2、H1标签中使用的关键词应该是页面最主要的关键词或品牌词并且应该是在网页标题中使用的关键词。3、H1标签之间肯定是需要包含关键词的但是这个关键词也是需要具有可读性和合理性不要为了强调而把这个关键词加进去而是因为这个关键词需要被强调才来加H1标签注意先后。是先有关键词然后给关键词加H1标签。4.如果把H1标签加在LOGO图片图片ALT信息上要加上网站名或品牌词这样才能更加突出首页的关键词不然给一个图片加H1你觉得有什么效果5.H1标签尽量靠近在html中的body标签越近越好以便让搜索引擎最快的找到主题。从上面的例子就可以发现H1标签都在body代码的最前面为什么?因为搜索引擎的抓取就是从上而下来的这样可以让H1标签强调的关键词最快被发现。6.内容页H1标签一般都是用在内容的大标题最好也是只用一次不过有很多内容页也用了2次一次用在LOGO或出现在网页最前面的主关键词一次用在内容的大标题上。如果最前面没有主要的关键词建议最好还是只用在大标题上一次。7.当不想将H1标签用在LOGO上并且网页主要的关键词在后面的时候如果还是想加H1标签并且想H1标签的关键词靠前可以利用DIV CSS布局来调整主关键词的位置这样也不会影响页面效果。8.不要总想着加H1标签很多大网站也是没有用H1标签像百度、新浪、爱站网等压根就没用H1标签所以只要真真切切的为用户提供信息就可以了至于是不是一定要用H1标签就不一定了。 9、p段落 10、strong强调加粗 11、em强调斜体 12、ul li列表无序ol li列表有序dl dt dd自定义列表dt-自定义列表titledd-自定义列表项 13、mark标记黄色背景标记 14、img图片标签 四、CSS标签样式初始化css reset 1、书写原则 1.1 用到什么标签就清除所用标签初始化样式建议不要直接将所有标签全部加上清除样式代码 1.2 不要将所有标签设置成统一一致的reset要按需分类设置。 2、浏览器都有默认样式但凡是浏览器的默认样式 都不要使用因为每个浏览器下标签的默认样式可能会出现不一致 3、需要重置的样式 3.1 盒模型相关的样式border、margin、padding 3.2 标签特有的样式ulli olli 五、常用选择器 1、ID选择器当前页面具有唯一性 #id 2、类class选择器统一标签设置多个类用空格分割 .class 3、标签选择器选择当前页面所有该标签 标签名div{……} 4、群组选择器用逗号隔开 p, h1, div{……} 5、包含选择器用空格表示包含 div a{......} 6、通配符不建议使用原因杀伤力强影响范围广性能差 * 7、css3特有的选择器 7.1 这些是 CSS3特有的选择器AB 表示选择A元素的所有子B元素。与A B的区别在于A B选择所有后代元素而A B只选择一代子元素。 六、选择器优先级 1、浏览器F12发现 1.1 样式被中划线说明样式 被覆盖 1.2 样式前面出现感叹号说明样式写错了 2、行间样式1000Id选择器100class类选择器10标签选择器1 第三章 一、块元素和行内元素 1、块元素特征 1.1 默认独占一行 支持所有CSS命令 2、内联元素特征 2.1 显示同排内容撑开高度不支持宽高不支持上下margin 左右margin可以代码换行被解析代码换行出现效果被浏览器解析结果以空格形式出现 3、块元素和内联元素的转换 3.1 display: [ inline | block | inline-block ]; 3.2 display 只是样式修改不会改变标签本质
