css网页制作

最新推荐文章于 2023-06-17 13:47:22 发布

zhangm2020

最新推荐文章于 2023-06-17 13:47:22 发布

阅读量989

点赞数 2

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/tec_1535/article/details/79143947

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

制作思路：

1.整体布局（整体为一个大的div），比如此网页，先分为三个div（上中下布局）；

2.将上div再分两个上下div，添加所需要的内容；

3.将中div分为两个左右div，在将左div分为三个上中下div，分别添加所需要的内容，接着再将右div分为上下两个div，由于图片右边文字的加入简单化，将此上下两个div再均分为左右两个div，分别加入图片与文字说明；

4.下div添加文字内容，设置风格。

制作总结：

1.制作页面时，现将整个页面设置为一个大的div，这样有利于整体改变；例如让此整个页面居中不铺满；

2.css可以帮助代码简洁化，风格可以重复应用；

3.在分div时，默认为上下区分，则有左右区分需求时，需添加float属性；

4.在设置背景图片时，为了保证图片的可观性，添加background-size: 100% 100% 属性；

5.本网页基于HTML 4.01 Transitional制作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 <div align="center">
 
  <div >
   <div class = "div0"  align="right">
   <table  cellspacing="30" cellpadding="10">
   <tr>
    <td>首页</td>
    <td>疑问</td>
    <td>论坛</td>
    <td>设计</td>
    <td>关于</td>
   </tr>
   </table>
   </div>
   <div class = "div1"></div>
  </div>
  
  <div class="div2" >
   <div class="div4" align="left">
    
    <div>
     <input type = "text"></input>
     <button>Search</button><br>
     <dl>
      <dt><font size = "5" face = "楷体">会员登录</font></dt>
      <dd>会员名：<input type = "text"></input></dd>
      <dd>密    码：<input type = "password"></input></dd>
      <dd><button>登录</button><button>注册</button></dd>
     </dl>
    </div>
    
    <div>
     <dl>
      <dt><font size = "5" face = "楷体">站点信息</font></dt>
      <dd>访问：284738次</dd>
      <dd>在线：47349天</dd>
      <dd>会员：34733天</dd>
      <dd>留言：482942个</dd>
      <dd>电话：3819311938</dd>
     </dl>
    </div>
    
    <div>
     <dl>
      <dt><font size = "5" face = "楷体">页面标准</font></dt>
      <dd>访问：284738次</dd>
      <dd>在线：47349天</dd>
      <dd>会员：34733天</dd>
      <dd>留言：482942个</dd>
      <dd>电话：3819311938</dd>
     </dl>
    </div> 
   </div>
   
   <div class = "div5" >
    <div class = "div6">
     <div class = "div4">
      <img alt="星空" src="../photo/星空.jpg" width=90% height=80%>
      <br>
      点击查看大图
     </div>
     <div class = "div5" align = "left">
      <ul>
       <li>网页名称：登录</li>
       <li>设计作者：小李</li>
       <li>网页风格：css</li>
       <li>发布时间：2017年9月1日</li>
       <li>网址内容：https:www.jsdsd.com</li>
       <li>内容简介：色即是空多军扩所几所军扩所几所扩扩扩扩所多军卡所多就覅二刷卡机次数就</li>
      </ul>
     </div>
    </div>
    
    <hr>
    
    <div class = "div6">
     <div class = "div4" align = "center">
      <img alt="星空" src="../photo/地球.jpg" width=90% height=80%>
      <br>
      点击查看大图
     </div>
     <div class = "div5" align = "left">
      <ul>
       <li>网页名称：登录</li>
       <li>设计作者：小李</li>
       <li>网页风格：css</li>
       <li>发布时间：2017年9月1日</li>
       <li>网址内容：https:www.jsdsd.com</li>
       <li>内容简介：色即是空多军扩所几所军扩所几所扩扩扩扩所多军卡所多就覅二刷卡机次数就</li>
      </ul>
     </div>
    </div>
   </div>
  <hr>
  </div>
  <div class="div3">
   <font face = "楷体" size = "5">西安科技大学<br>        寒假学习所制</font>
  </div>
 </div>
</body>
</html>

@CHARSET "UTF-8";
.div0{
 width:90%;
 height:15%;
 background-image:url(../photo/图片2.png);
 background-position:center;
 background-size: 100% 100%;
}
.div1{
 width:90%;
 height:40%;
 background-image:url(../photo/图片1.png);
 background-position:center;
 background-size: 100% 100%;
}
.div2{
 width:90%;
 height:70%;
}
.div3{
 width:90%;
 height:10%;
 background-color:gray;
}
.div4{
 width:30%;
 height:100%;
 float:left;
}
.div5{
 width:70%;
 height:100%;
 float:right;
}
.div6{
 width:100%;
 height:50%;
}