静态网页制作的小技巧之一

作为一只刚入门不久的程序员菜鸟，在刷了百度前端学院的两个任务后，得出了一些学习心得。一下的内容是浅显的，若有不足的地方，希望大家能够批评指正；也希望下面的内容可以对刚入门的人有所帮助。

关于div的使用：

首先对网页要有一个宏观上的设计想法，将网页内容用div进行分块处理，有时为了处理方便，可以用div包裹div。

关于无序列表ul li的问题：

对ul使用

display:inline;

去除默认样式。

要想使里面的li成横向排列，常用的方法有两种：

（1）设置li样式：

display:inline;

直接使其成为行内元素，让其横向排列

（2）设置li样式：

display:block; float:left;

一般会使用方法二，有时为了让菜单变得更宽，我们需要进行padding，margin的设置，有时我们还需要调整li元素中文字的位置text-align，这些都是属于块级元素的特点，我们要将li的显示效果转换为块级显示。

关于表单的问题：

表单中的默认文本与文本区域的底部对齐，对齐进行调整：

/*html内容*/
<p>
<span>个人描述</span>
<textarea rows="3" cols="20" class="bd">多行输入框，输入您的个人描述</textarea>
</p>
/*CSS样式*/
span{
diaplay:inline-block;
vertical-align:top
}

input框上下对齐：

实际上是设置框前的文字向右对齐。（为了方便，我直接将表单这一块儿的代码传上来)

/*html内容*/
<form>
<div class="fill">
<p><span>请输入邮箱地址</span><input type="text" value="这是一个文本输入框" class="bd"></p>
<div class="prompt">邮箱地址请按要求格式输入</div>
<p><span>请输入密码</span><input type="text" class="bd"></p>
<p><span>请重复输入密码</span><input type="text" class="bd"></p>
<div class="prompt">密码申请为6-16位英文数字</div>
<p><span>性别</span><input type="radio" name="sex" value="male" checked class="bd">男
<input type="radio" name="sex" value="female" class="bd">女</p>
<p><span>城市</span>
<select class="bd">
<option value="BeiJing">北京</option>
<option value="ShangHai">上海</option>
<option value="ShenZhen">深圳</option>
<option value="SuZhou">苏州</option>
<option value="WuHan">武汉</option>
<option value="ChengDu">成都</option>
</select>
</p>
<p>
<span>爱好</span>
<input type="checkbox" class="bd">运动
<input type="checkbox" class="bd">艺术
<input type="checkbox" class="bd">科学</p>
<p>
<span>个人描述</span>
<textarea rows="3" cols="20" class="bd">多行输入框，输入您的个人描述</textarea>
</p>
</div>
<div class="outersub">
<input type="submit" value="确认提交" class="submit">
</div>
</form>
/*CSS样式*/
.fill{
padding-left: 200px;
}

.bd{
border: 1px solid darkgray;
margin-left: 20px;
}

.fill p{
margin-top: 14px;
margin-bottom: 14px;
}

.fill p span{
display: inline-block;
width: 200px;
vertical-align: top;
text-align: right;
}

.fill .prompt{
margin-left: 220px;
font-size: 14px;
color: gray;
}

.outersub{
margin:20px;
}

.submit{
background-color: royalblue;
color: white;
width:100%;
height: 50px;
border-radius: 10px;
}

整体的效果图是：



居中显示：

（1）水平居中：text-align:center;

（2）垂直居中：将外层盒子显示为表格，内层盒子显示为表格单元，即可对表格单元中的内容做垂直调整。

/*html代码*/
<div id="outright">
<div id="inright">
版权所有&
</div>
</div>
/*css内容*/
#outright{
display: table;
margin: 0px auto;
height: 100px;
width: 100%;
background-color: black;
}

#inright{
display: table-cell;
color: white;
text-align: center;
vertical-align: middle;
width:100%;
font-size: 10pt;
}

关于表格table：

表格的多栏合并：

<td colspan="2">1000</td>

对于表格的边框，自己写的css代码的解析过程下次总结，也可以使用一些框架，使表格的具有响应式的效果。

关于float：

float属性定义对象在哪个方向浮动，css中任何元素都可浮动，浮动元素会生成一个块级框，而不论其本身是什么元素。若要指定一个非替换元素，一定要指定一个宽度，否则浮动块会尽可能的窄。非替换元素: 将内容直接告诉浏览器，将其显示出来。替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

<img>、<input>、<textarea>、<select>、<object>

都是替换元素，这些元素都没有实际的内容。