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

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

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

课后作业静态网页制作-仿rollingstone官网

html源代码: Document Follow @RollingStone ...
  • dj5156
  • dj5156
  • 2016年06月23日 23:36
  • 247

课后作业静态网页制作-仿Argo官网

html源代码: Document HOME PRODUCT...
  • dj5156
  • dj5156
  • 2016年06月27日 02:05
  • 90

静态网页制作

  • 2015年04月16日 13:17
  • 161KB
  • 下载

《基础网页制作》一个超简单的div布局,制作静态网页很简单

效果图附上 以下代码超简单的,就不解释啦 Div布局 主要应用于网站首页公告和标签 附加推荐菜单 首页 衣服 裤子 鞋子 头饰 第一页面显示板块...

2012静态网页制作.pdf.zip

  • 2012年01月01日 03:31
  • 36.25MB
  • 下载

网页制作中CSS样式布局实用小技巧

作者:星狮创想  下面跟大家分享一下网页制作中CSS样式布局实用小技巧,希望对大家有所帮助。 1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 2、...

dreamweaver8静态网页制作课件

  • 2010年03月04日 16:24
  • 7.35MB
  • 下载

静态网页制作

  • 2013年04月27日 23:02
  • 962KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:静态网页制作的小技巧之一
举报原因:
原因补充:

(最多只允许输入30个字)