HTML+CSS学习Day05笔记

Day05笔记

一、网站搭建

1、需要一个站点 — 一个大的文件夹，主要作用是归纳网站里面的素材和文件，方便后期的维护

images 文件夹

css 文件夹

js文件夹

html文件夹

index.html

二、网页布局形式

1、在实际开发中目前从大的方面划分，网页布局分为两种形式

​ 窄屏页面：元素外层宽度固定死，不会随着分辨率变化。最早的时候电脑分辨率普遍比较低的，所以采用这种形式是便捷的。但是随着电脑普及，技术的迭代，电脑的屏幕越来越好了，很显然窄屏页面布局不能适应目前的开发需求了，所以出现宽屏页面布局

​ 示例代码：

/*样式代码*/
<style>
	*{margin:0;padding:0;}
	/*无论在什么分辨率下，都是采用外层元素宽度固定*/
	.header{
		width:1200px;
		height:100px;
		background-color:yellow;
		margin:0 auto;
		}
</style>

<!--结构代码-->
<div class="header">网页头部区域</div>

​ 宽屏页面：元素外层的宽度让其自适应，内容区域的宽度固定。把这种布局形式也叫做外层自适应+版心布局

​ 示例代码:

/*样式代码*/
<style>
	*{margin:0;padding:0;}
	/*外层元素宽度自适应，内容区域宽度固定，可以让网页布局更为灵活*/
	.header{
		width:100%;
		height:100px;
		background-color:yellow;
		}
	.header .content{
		width:960px;
		height:100px;
		background-color:red;
		margin:0 auto;
		}
</style>

<!--结构代码-->
<div class="header">
	<div class="content">内容区域</div>
</div>

2、在开发中选取合理的布局方式，根据开发需求来进行变化，当然目前为止窄屏布局已经很少使用了

三、网页注意事项

问题1：当容器没有设置高度时，图片会默认把容器底部撑大几像素，大概3px。解决方案：给容器设置高度

问题2：input标记默认有2px边框。解决方案：border:none|0;

问题3：横向排列的元素默认元素与元素之间有间隙，这个间隙是由于横向排列的元素在代码排列中换行后产生的。解决方案：float:left;

问题4：input标记默认自带轮廓。解决方案：outline:none;

问题5：焦点分为获取焦点和失去焦点

• 获取焦点：当鼠标移动到input框里面点击后，当光标闪烁时把这种状态叫做获取焦点
• 失去焦点：当鼠标移动到input框外面，当点击了其他区域光标停止闪烁时把这种状态叫做失去焦点

问题6：宽屏页面banner图处理方案

UI小姐姐设计图的时候，一般会把图的大小设计为版心区域大小，然后咱们使用外层元素填充颜色形式进行布局使用

代码示例：

<!--样式代码-->
<style>
	*{margin:0;padding:0;}
	.banner{
		width:100%;
		height:475px;
        /*外层颜色填充*/
		background-color:#c82020;
		}
	.banner .con{
        /*背景图和版心区域大小一致*/
		width:990px;
		height:475px;
		background:url(images/jd.jpg) no-repeat center center;
		margin:0 auto;
		}
</style>

<!--结构代码-->
<div class="banner">
	<div class="con"></div>
</div>

问题7：当边框不给设置颜色的时候，默认就是黑色的

border:1px solid;

问题8：容器设置了宽度，当子元素没有设置宽度的时候会默认跟随父元素的宽度，这种现象仅限于自上而下排列的，独占一行的元素

order:1px solid;

问题8：容器设置了宽度，当子元素没有设置宽度的时候会默认跟随父元素的宽度，这种现象仅限于自上而下排列的，独占一行的元素