仿souhu页面设计

仿搜狐页面设计

仿souhu页面设计

Html页面设计代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>sohu.html</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="./sohu.css">

</head>

<body>

<!-- 最上面的DIV -->

<div   class="top1">

<div  class="login">登陆部分</div>

<div class="indexpage">设为首页部分</div>

<div  class="lianjie">超链接</div>

</div>

<!-- 中间的DIV -->

<!-- logo  div -->

<div   class="headlogo">logo</div>

<!-- 导航 div -->

<div class="daohang">daohang</div>

<!-- 下面的DIV -->

<div  class="dibu0">

<div  class="dibu1">1</div>

<div  class="dibu2">2</div>

<div  class="dibu3">3</div>

</div>

<div  class="dibu4">4</div>

</body>

</html>

CSS代码设计

@CHARSET "UTF-8";

body{

width: 960px;

margin: 0  auto;

/*background-color: pink;*/

border: 1px  solid  red;

font-size: 12px;

}

.top1{

width: 960px;

height: 22px;

background-color: blue;

}

/*登陆部分*/

.login{

width: 416px;

height: 22px;

background-color: pink;

float: left;

}

.indexpage{

width: 105px;

height: 22px;

background-color: yellow;

float: left;

margin-left: 50px;

}

.lianjie{

width: 200px;

height: 22px;

float: right;

background-color: green;

}

.headlogo{

width: 137px;

height: 76px;

background-color: black;

float: left;

margin-top: 5px;

}

.daohang{

width: 813px;

height: 76px;

background-color: orange;

float: left;

margin-left: 10px;

margin-top: 5px;

}

.dibu0{

width: 770px;

height: 231px;

border: 1px  solid  black;

float: left;

margin-top: 3px;

}

.dibu1{

width: 135px;

height: 217px;

background-color: green;

float: left;

margin-left: 2px;

margin-top: 6px;

}

.dibu2{

width: 452px;

height: 217px;

background-color: orange;

float: left;

margin-left: 10px;

margin-top: 6px;

}

.dibu3{

width: 135px;

height: 217px;

background-color: green;

float: left;

margin-left: 10px;

margin-top: 6px;

}

.dibu4{

width: 181px;

height: 231px;

float: left;

margin-top: 3px;

margin-left: 3px;

border: 1px  solid black;

}

上一篇:springboot配置server相关配置&整合模板引擎Freemarker、thymeleaf&thymeleaf基本用法&thymeleaf 获取项目路径 contextPath 与取session中信息


下一篇:jwplayer 隐藏属性方法记载