m5k1umn 发表于 2024-6-29 14:36:33

div+css网页标准布局实例教程 文案出处：标准之路(www.51sdpq.com)


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">布局页面——头部和导航 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有了上边的<span style="color: black;">基本</span>，下面的任务<span style="color: black;">便是</span>要利用html和css制作完成一个完整的网页了。先从头部<span style="color: black;">起始</span>，第三小节时<span style="color: black;">咱们</span><span style="color: black;">已然</span>把整体框架给搭建好了，就像盖房子<span style="color: black;">同样</span>，整体结构<span style="color: black;">已然</span>出来了，下面就<span style="color: black;">必须</span>填砖分割空间了。先分析下头部：分为两部分，一个是logo靠左侧<span style="color: black;">表示</span>，一个是搜索靠右侧<span style="color: black;">表示</span>，<span style="color: black;">那样</span>布局时<span style="color: black;">插进</span>两个div，一个向左浮动，一个向右浮动的方式来完成。<span style="color: black;">另一</span>还有<span style="color: black;">非常多</span>种实现<span style="color: black;">办法</span>，<span style="color: black;">例如</span>logo用h1标签，搜索用span，<span style="color: black;">或</span>把logo做为背景<span style="color: black;">照片</span><span style="color: black;">亦</span>是<span style="color: black;">能够</span>的，不管采用哪种<span style="color: black;">办法</span>，要<span style="color: black;">按照</span>页面的需求<span style="color: black;">选择</span>一种最<span style="color: black;">恰当</span>的<span style="color: black;">办法</span>。<span style="color: black;">倘若</span>要在logo加上链接的话，<span style="color: black;">那样</span>就<span style="color: black;">不可</span>用背景<span style="color: black;">照片</span>的<span style="color: black;">办法</span>了。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="header"&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="logo"&gt;此处<span style="color: black;">表示</span> id "logo" 的内容&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="search"&gt;此处<span style="color: black;">表示</span> id "search" 的内容&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">先在header里<span style="color: black;">插进</span>以上两块元素。<span style="color: black;">而后</span>分别<span style="color: black;">插进</span>相应的内容，在logo里<span style="color: black;">插进</span><span style="color: black;">咱们</span>事先切割好的logo<span style="color: black;">照片</span>，在search里<span style="color: black;">插进</span>一个表单，一个文本框和一个按钮，<span style="color: black;">插进</span>后如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="header"&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="logo"&gt;&lt;img src="images/logo.gif" width="181" height="45" /&gt;&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;div id="search"&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;form id="form1" name="form1" method="post" action=""&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">搜索<span style="color: black;">制品</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;input type="text" name="textfield" id="textfield" /&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;input type="submit" name="button" id="button" value="<span style="color: black;">查找</span>" /&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;/form&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;/div&gt;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">接下来定义css吧，在ps里<span style="color: black;">测绘</span>，头部的高度是71px，logo距顶部18px，搜索<span style="color: black;">制品</span>距顶部30px，下面在css里把这些参数都给定义上，看<span style="color: black;">表示</span>的效果和效果图中的效果是不是<span style="color: black;">同样</span>呢？</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#logo { float:left; margin-top:18px;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#search { float:right; margin-top:30px;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这两项的位置<span style="color: black;">已然</span>差不多了。预览你会<span style="color: black;">发掘</span>，搜索框和按钮跟效果图中的不<span style="color: black;">同样</span>，这是<span style="color: black;">由于</span><span style="color: black;">咱们</span>还没对它设置样式，接下来把文本框<span style="color: black;">增多</span>一个class为inp_srh样式，按钮<span style="color: black;">增多</span>btn_srh的样式，<span style="color: black;">而后</span>定义这两个样式的属性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#search { float:right; height:24px; margin-top:30px; color:#444;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.inp_srh { width:140px; height:17px; padding-left:20px; bac<span style="color: black;">公斤</span>round:url(../images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbcbcb;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.btn_srh { width:58px; height:23px; bac<span style="color: black;">公斤</span>round:url(../images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#search * { vertical-align:middle;}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>给search<span style="color: black;">增多</span>了高度和文字颜色，这点<span style="color: black;">不消</span>多解释，但高度<span style="color: black;">为何</span>是24px，是为了照顾 IE6，<span style="color: black;">大众</span>去掉测试下就<span style="color: black;">晓得</span>了；</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">inp_srh的宽度和高度并不是实际效果图中的宽高，是<span style="color: black;">由于</span>默认<span style="color: black;">状况</span>下文本框带有内边距<span style="color: black;">导致</span>的。<span style="color: black;">另一</span><span style="color: black;">便是</span>padding的值<span style="color: black;">亦</span>会算到总宽度上的；</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">btn_srh<span style="color: black;">便是</span>应用背景图像来实现的，说明一点<span style="color: black;">这儿</span>的border的值为none指的是<span style="color: black;">没</span>边框，cursor定义鼠标样式为手形，之前许多<span style="color: black;">伴侣</span>用hand，但这个通<span style="color: black;">不外</span>w3c认证。text-i</p>




1fy07h 发表于 2024-9-26 16:03:05

外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。

nykek5i 发表于 2024-11-8 14:17:45

我完全同意你的看法，期待我们能深入探讨这个问题。
页: [1]
查看完整版本: div+css网页标准布局实例教程 文案出处：标准之路(www.51sdpq.com)