网页设计布局div+css代码实现一（附源文件）-天涯论坛

nqkk58 发表于 2024-6-30 08:47:57

网页设计布局div+css代码实现一（附源文件）

<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Hi.今天<span style="color: black;">起始</span>第三课，<span style="color: black;">重点</span>说下<span style="color: black;">怎样</span>实现<span style="color: black;">第1</span>课画的网页布局样式。在<span style="color: black;">这儿</span>说下写网页代码和用什么软件<span style="color: black;">无</span>关系，常用的软件有Dw、Vs、记事本、Hbuilder、Sublime等，我这边用的是Sublime。在制作前<span style="color: black;">咱们</span>先看下最初的设计稿，如下图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-c4c7ffa652d98fe760ace25e62f3e6ff_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">第1</span>步，确定网页的尺寸，<span style="color: black;">这儿</span>重点说下，网页的尺寸<span style="color: black;">通常</span>设计在1000p-1300px之间。在网页部分的板块<span style="color: black;">能够</span>用1920px做全铺延申效果，<span style="color: black;">然则</span>网页的内容最好是放到1000p-1300px之间。下面<span style="color: black;">咱们</span>就用1200px<span style="color: black;">做为</span>这次的网页效果。</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>文件夹images,css文件夹css，js文件夹js，<span style="color: black;">这儿</span><span style="color: black;">大众</span><span style="color: black;">能够</span>根据自己的需求来定义文件夹。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-c14b288e08c98d637774a8ab06d16866_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<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;">1、在根目录下新建index.html文件,在css文件夹新建style.css。在编辑器打开index.html。完成网页的基本代码，如下：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
   <html>
   <head>
   <title></title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
   这个放内容
   </body>
   </html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、在html定义好<span style="color: black;">每一个</span>盒子的命名，并做好注释。代码如下：（这段代码是放到body标签里面。）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">
   <div class="header">
   <div class="logo"></div>
   <div class="nav"></div>
   </div>
   
   <div class="banner">
   </div>
   
   <div class="content">
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   </ul>
   </div>
   
   <div class="footer">
   </div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、定义css.css文件，把html里面命名的盒子写上相对应的属性，代码如下</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">*{
   margin: 0;
   padding: 0;
   }
   body{
   font-size: 14px;
   color: #333;
   font-family: 微软雅黑
   }

   .header{
   width: 1200px;
   margin: 0 auto;
   height: 50px;
   border: 1px solid #99CC66
   }
   .logo{
   float: left;
   width: 200px;
   border: 1px solid #99CC66;
   height: 50px;
   }
   .nav{
   float: left;
   width: 800px;
   }
   .banner{
   width: 1200px;
   margin: 10px auto;
   height: 350px;
   border: 1px solid #99CC66
   }
   .content{
   width: 1200px;
   margin: 10px auto;
   height: 450px;
   border: 1px solid #99CC66
   }
   .content li{
   float: left;
   width: 260px;
   margin-left: 30px;
   border: 1px solid #99CC66;
   list-style: none;
   height: 200px;
   margin-top: 20px;
   bac<span style="color: black;">公斤</span>round-color: #99CC66
   }
   .footer{
   width: 1200px;
   margin: 10px auto;
   height: 100px;
   border: 1px solid #99CC66
   }</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、<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>完成css美化网页及<span style="color: black;">照片</span>和文字内容的填充工作。</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>啦。</p>

流星的美 发表于 2024-8-22 17:17:06

你的言辞如同繁星闪烁，点亮了我心中的夜空。

vip51888 发表于 2024-8-25 02:16:32

我完全同意你的看法，期待我们能深入探讨这个问题。

听听海 发表于 2024-8-25 06:35:20

你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。

qzmjef 发表于 2024-10-20 03:43:51

在遇到你之前，我对人世间是否有真正的圣人是怀疑的。

4lqedz 发表于 2024-10-21 06:44:34

这夸赞甜到心里，让我感觉温暖无比。

4lqedz 发表于 13 小时前

楼主的文章深得我心，表示由衷的感谢！

页: [1]

天涯论坛's Archiver

网页设计布局div+css代码实现一（附源文件）