7、网页排版实战

最新推荐文章于 2022-12-24 12:11:44 发布

JavaDayUp-远行客

最新推荐文章于 2022-12-24 12:11:44 发布

阅读量622

点赞数 1

分类专栏：初级阶段4-网页编程

本文链接：https://blog.csdn.net/liubao616311/article/details/84035388

版权

初级阶段4-网页编程专栏收录该内容

48 篇文章 18 订阅

订阅专栏

学习目标：

1、使用html和css等知识完成排版功能

学习过程：

虽然我们学习了html和css，我们还是需要通过一个简单的网页的制作才能更好的掌握的，一般制作网页都是先使用Photoshop软件，先把网页PS出来，然后在交给客户验收，用户确认后我们再进行排版，当然我们不是专业学习前端知识，所以这里我们就简单的实现一个html页面即可。

例如下面这个网，我们先PS出来，

然后使用Photoshop软件进行切片——就是把图片一张张的保存处理，这个时候才使用Dreamweaver等网页制作软件开始网页排版。小图表如下：

使用Dreamweaver新建一个站点，然后把图片复制进行，新建一个index.html和一个style.css的样式文件，在index.html引入这个样式文件，然后就可以开始编码工作了。

网页的排版都是采用div+css的方式，先整体布局，然后再对每个小布局一步一步的排版即可。打开style.css先设置一些整体的信息。代码如下：

@charset ;

*{ margin:0px; padding:0px;}
body{ width:1000px; margin:0 auto}
a{ text-decoration:none}
ul li {list-style-type:none}
#header{ width:1000px; height:94px; background:#00FF00}
#content{ width:1000px; height:500px; background-color:#66FFFF}
#footer{width:1000px; height:50px; background-color:#FF33FF}

html只是结构化的配置，代码如下：

<body>

<div id="header">
   <div id="header_left">
       <img src="images/index_logo.png" />
   </div>
   <div id="header_right">
        <div id="header_right_top">
             <div id="user"><a href="#">用户：admin</a></div>
             <div id="refelsh"><a href="#">刷新</a></div>
             <div id="nowtime"><span>12月23日 12：60</span></div>
        </div>
         <div id="header_right_footer">
             <ul>
                 <li> <a href="#">修改密码</a> </li>
                 <li> <a href="#">返回首页</a> </li>
                  <li> <a href="#">安全退出</a> </li>
             </ul>
         </div>
   </div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>

基本的结构已经出来，下面我们就先做头部的头部有分为左右两个部分，右边也分为上下两个部分，一步一步的完成就可以了。

逐步的完成css实现如下：

@charset ;



*{ margin:0px; padding:0px;}



body{ width:1000px; margin:0 auto}

a{ text-decoration:none}

ul li {list-style-type:none}

#header{ width:1000px; height:94px; background:url(index_top_bg.gif) repeat-x}

   #header_left{width:650px; height:94px; background:url(index_top_left.gif) no-repeat; float:left}

   #header_right{width:345px; height:94px; overflow:hidden}

        #header_right_top{ padding-top:14px}

   #user{ background:url(index_admin_type.gif) no-repeat; float:left}

   #user a{ color:#FFFFFF; padding:8px 0 0 22px; font-size:14px}

   #refelsh{ background:url(index_refresh_type.gif) no-repeat; float:left; margin-left:8px}

   #refelsh a{ color:#FFFFFF; padding:8px 0 0 22px;font-size:14px }

   #nowtime{ background:url(index_time_type.gif) no-repeat; margin-left:8px; float:left}

   #nowtime span{color:#FFFFFF; padding:8px 0 0 22px;font-size:14px }

#header_right_footer{ clear:both; padding-top:24px}

 #header_right_footer ul{}

 #header_right_footer ul li { float:left; padding-right:5px;}

           #header_right_footer ul li a { width:108px; height:36px; display:block; color:#FFFFFF; background:url(top_menu_link.gif) no-repeat; text-align:center; padding-top:6px}

   #header_right_footer ul li a:hover{ background:url(top_menu_hover.gif) no-repeat; text-decoration: underline}

#content{ width:1000px; height:500px; background-color:#66FFFF}

#footer{width:1000px; height:50px; background-color:#FF33FF}

效果如下：

剩下的内容就交给大家去完成了。

JavaDayUp-远行客

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
7、网页排版实战

学习目标：1、使用html和css等知识完成排版功能学习过程：虽然我们学习了html和css，我们还是需要通过一个简单的网页的制作才能更好的掌握的，一般制作网页都是先使用Photoshop软件，先把网页PS出来，然后在交给客户验收，用户确认后我们再进行排版，当然我们不是专业学习前端知识，所以这里我们就简单的实现一个html页面即可。例如下面这个网，我们先PS出来，然后...
复制链接

扫一扫

专栏目录