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

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

关于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>都是替换元素，这些元素都没有实际的内容。

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

猜你喜欢