网站页面设计笔记--前期准备与Header制作

前期准备 1.建立文件结构。然后分成资源和提供两个文件夹。一个存入本地使用，一个存入外部引入（Grid布局和normalize css在外部)再分别放入图片/css/js之类的 image.png 2.通过link使用文间结构中的css image.png 3.加入normalize.css 使得css在所有的浏览器都有同样的显示效果 https://necolas.github.io/normalize.css/ 4.设置字体，在GoogleFonts里面找，里面中文也有几种，但是不太适合网页设计。font-family后面最好跟2到3中字体，以防某一种无法显示时有替代。 中文一般用微软雅黑和冬青字体 https://segmentfault.com/a/1190000006110417 ， 中文字体应用指南 https://segmentfault.com/a/1190000006110417， 前端开发你该知道的字体 font-family http://www.fly63.com/article/detial/1114，使用googlefonts image.gif 5.清除浏览器自带margin和padding，并设置具体box-sizing:border-box以设计盒子宽度（包括padding） image.png 6.设计整个页面的背景颜色，字体颜色/字型/粗细/大小， image.png 文字展现最优化 7.使用grid布局，它的css文件J老师提供了。用link引入， 在它的响应式布局中，唯一的确定数值就是 image.png 也就是一排的长度，可以被网站的所有位置使用。如果其他部分要改变长度，用百分比 image.png 上下都是0，左右都是auto，更加方便居中。 Header制作--问题与解答 header标签（头部），nav标签（navigation导航栏），footer标签（页脚)，main标签（main content（主要内容），都是字面意思，方便观看 就代表这个链接暂时没有地方可去，之后可以输入地址 问题：如何使用背景图片。在header使用背景图片，url链接啊 image.png 如此无法在页面中显示图片，需要把整个header与浏览器屏幕一致，让图片跟浏览器的显示页面尽量一样高 image.png 可以解决这个问题，vh是 vertical height垂直高度的意思 出现问题，上面有空隙。 image.png 需要进行右键检查，得出问题是h1有上下margin image.png 所以我们需要去除它。在css中将h1的margin设置为0即可 出现问题，图片无法完全展示，只展示了一部分 image.png 为了解决这个问题，需要用到background-position:center 和background-size:cover; image.png positon-size:contain代表只完整覆盖header的区域，其他两边都是边边角角 如何保持水平与垂直居中？用绝对定位，相对于它的父元素做变化，因为它的父元素时整个header，所以合理。然后top50%，left50% 又出现问题，出现在中间的是box的左上角，而我们想要内容居于正中 image.png 这个时候可以使用transform:translate(-50%,-50%)，它可以帮助这个上移和左移动50% image.png 问题：上图可以看到，headline不容易被看到，所以需要将背景虚化。在background-image里面设置linear-gradient(线性梯度的颜色变化，需要设置两个颜色，和相应的透明度 image.png ) image.png 10.header制作part-2 因为我们想要制作响应式布局，所以不要直接设置h1标题的大小，而是通过font-size百分比来调整大小 image.png 字体越大，就需要越细，更显得协调，减小font-weight 对文字进行改变，transform就是改变外观的意思，用text-transform【注意和改变居中时的transform:translate(-50%,-50%）不要弄混了】，其中有首字母大写，全字母大写（uppercase)等 问题：如何让行内元素可以设置padding和margin呢？inline-block，行内块元素，不会将行内元素挤下去，可以有marin和padding。一个行内元素如何变成inline-block呢？ image.png 问题：如何去除下划线，如果让下划线在上面/中间？用text-decoration，翻译过来也就是文本装饰来决定，none选择就可以去除下划线 image.png 注意和去除ul前圆点的list-style:none的区分 问题：如何快速设置button颜色？之前J老师推荐过的flatuicolors.com image.gif border-radius https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius image.png 问题：如何让链接按钮看起来跟正常状态一样。要使用伪类。 含义就是假如发生和这种情况 image.png 。visited伪类，就是加入被访问之后，会发生什么（自己决定），这是为了确保在点击之后，还是一样的（有些网站会出现问题） image.png 问题：点击或鼠标于其上时，如何变换成更暗的颜色？（渐变颜色） image.png ？答：使用伪类，然后设定当符合伪类条件时，展现更暗的颜色。 如何获得更暗的颜色呢？答：利用工具0to255 image.png 问题：用transiton设置颜色渐变时间（这就是一个小的动画），在MDN上获得 image.png 就是用 image.png 解决了问题，也可以按照J老师设置的 image.png 11.header制作part3 随着代码越来越多，必须要对结构进行整理，不然会迷失方向的。J老师喜欢用分隔不同的区域 image.png 问题：用什么做导航栏？因为要导向不同的页面，所以需要在li里面使用a链接 image.png 问题：去掉ul前的圆点 list-style:none 问题：如何让导航栏的选项并排？设置inline-block，块级元素能够并排。然后再设置左右方向的margin或者padding image.png 如果要除去ul前面的圆点，或者是a链接的下划线，需要指定到它们 image.png 确认了页面的整体字体大小后，如果要得到更大或更小的字体，就用百分比。 image.png image.png

本文章由javascript技术分享原创和收集