【HTML&CSS】搜狐页面代码编写
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]--> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>搜狐首页</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
<link rel="stylesheet" href="./sohu.css">
</head> <body>
<div class="top">
<div class="logo">
<div class="logoimg">
图标
</div>
<div class="dapp">
下载app
</div>
</div>
</div>
<div class="mast">
<!-- 第一部分 -->
<div class="sousuo">
<div class="sousuo1">
搜索1
</div>
<div class="sousuo2">
搜索2
</div>
</div>
<!-- 第二部分 -->
<div class="toutiaolianjie">
头条链接
</div>
<!-- 第三部分 -->
<div class="guanggaolan">
<div class="guanggaolan1">
广告1
</div>
<div class="guanggaolan2">
广告2
</div>
</div>
<!-- 第四部分 -->
<div class="xinwen">
<!-- 第四部分第一列 图片新闻-->
<div class="imgxinwen">
<div class="bigimg">
大图新闻
</div>
<!-- 小图新闻 -->
<div class="smallimg">
<table class="smallimgtable">
<tr>
<td>
<div class="smallimgall smallimg1">
小图标题新闻1
</div>
</td>
<td>
<div class="smallimgall smallimg2">
小图标题新闻2
</div>
</td>
</tr>
<tr>
<td>
<div class="smallimgall smallimg3">
小图标题新闻3
</div>
</td>
<td>
<div class="smallimgall smallimg4">
小图标题新闻4
</div>
</td>
</tr>
</table>
</div>
<!-- 视频标题栏 -->
<div class="shipinbiaoti">
视频标题栏
</div>
<!-- 视频 -->
<div class="shipin1">
大视频
</div>
<div class="leftnews1">
文字新闻
</div>
<div class="shipin2">
视频2
</div>
<div class="leftnews2">
文字新闻2
</div>
</div>
<!-- 第四部分第二列 中间部分文字新闻-->
<div class="textxinwen">
<div class="textnewsall textnews1">
新闻标题8条
</div>
<div class="textnewsall textnews2">
新闻标题6条
</div>
<div class="textnewsall textnews3">
新闻标题6条
</div>
<div class="textnewsall textnews4">
新闻标题6条
</div>
<div class="textnewsall textnews5">
新闻标题6条
</div>
<div class="textnewsall textnews6">
新闻标题1条
</div>
</div>
<!-- 第四部分第三列 右侧内容标题-->
<div class="biaotilan"> <div class="right1">
换一换广告
</div>
<div class="right2">
图片广告
</div>
<div class="right3">
24小时热文
</div>
</div>
</div>
</div>
<!-- 第五部分 --> <script src="" async defer></script>
</body> </html>
看完一整本书，结果写不出什么东西，按书上教程来，基本能把例子完成个七七八八，可是用padding还是margin完全整不清……，而且只要结构一复杂，元素就各种不受控制。
没办法 找来韩顺平老师的视频（没错，就是在网上不知道怎么搞来的）
看完老师讲完整个html&CSS部分2，终于把这个内容吃透了。
韩顺平老师讲课最后一个用例就是还原搜狐门户网站的首页HTML和css部分，虽然视频中他的是n年前的网站页面，蛋根本不妨碍我完成完成现在版本的搜狐页面 。
第一次看完视频，写的乱七八糟，很多东西摆不到应有的地方，没办法，在浏览器按f12键，查看人家的源代码，发现很多东西用了ul和li的组合插入文字，图片，而是原来HTML和css组合也没这么难，大神的代码实现也是很平凡很淡。
很多收获记手机上，回头整理发这里。
我做出来的效果图是这样的：
代码如下：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]--> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>搜狐首页</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
<link rel="stylesheet" href="./sohu.css">
</head> <body>
<div class="top">
<div class="logo">
<div class="logoimg">
图标
</div>
<div class="dapp">
下载app
</div>
</div>
</div>
<div class="mast">
<!-- 第一部分 -->
<div class="sousuo">
<div class="sousuo1">
搜索1
</div>
<div class="sousuo2">
搜索2
</div>
</div>
<!-- 第二部分 -->
<div class="toutiaolianjie">
头条链接
</div>
<!-- 第三部分 -->
<div class="guanggaolan">
<div class="guanggaolan1">
广告1
</div>
<div class="guanggaolan2">
广告2
</div>
</div>
<!-- 第四部分 -->
<div class="xinwen">
<!-- 第四部分第一列 图片新闻-->
<div class="imgxinwen">
<div class="bigimg">
大图新闻
</div>
<!-- 小图新闻 -->
<div class="smallimg">
<table class="smallimgtable">
<tr>
<td>
<div class="smallimgall smallimg1">
小图标题新闻1
</div>
</td>
<td>
<div class="smallimgall smallimg2">
小图标题新闻2
</div>
</td>
</tr>
<tr>
<td>
<div class="smallimgall smallimg3">
小图标题新闻3
</div>
</td>
<td>
<div class="smallimgall smallimg4">
小图标题新闻4
</div>
</td>
</tr>
</table>
</div>
<!-- 视频标题栏 -->
<div class="shipinbiaoti">
视频标题栏
</div>
<!-- 视频 -->
<div class="shipin1">
大视频
</div>
<div class="leftnews1">
文字新闻
</div>
<div class="shipin2">
视频2
</div>
<div class="leftnews2">
文字新闻2
</div>
</div>
<!-- 第四部分第二列 中间部分文字新闻-->
<div class="textxinwen">
<div class="textnewsall textnews1">
新闻标题8条
</div>
<div class="textnewsall textnews2">
新闻标题6条
</div>
<div class="textnewsall textnews3">
新闻标题6条
</div>
<div class="textnewsall textnews4">
新闻标题6条
</div>
<div class="textnewsall textnews5">
新闻标题6条
</div>
<div class="textnewsall textnews6">
新闻标题1条
</div>
</div>
<!-- 第四部分第三列 右侧内容标题-->
<div class="biaotilan"> <div class="right1">
换一换广告
</div>
<div class="right2">
图片广告
</div>
<div class="right3">
24小时热文
</div>
</div>
</div>
</div>
<!-- 第五部分 --> <script src="" async defer></script>
</body> </html>
css（html文件和css文件放同一个目录层下）：
body {
margin: 0 auto;
border: 1px solid red;
}
.mast {
margin: 0 auto;
width: 1180px;
background-color: rgb(88, 88, 88);
}
.top {
background-color: #222222;
height: 30px;
}
.logo {
width: 1180px;
margin: 0 auto;
background-color: yellow;
}
/* 从这里开始一律采用左/右浮动 */
.logoimg {
float: left;
width: 145px;
height: 95px;
background-color: #25c058;
}
.dapp {
float: right;
width: 160px;
background-color: yellow;
}
.sousuo{
float: right;
width: 940px;
height: 40px;
background-color: #174b12;
margin-top: 25px;
}
.sousuo1{
float: left;
width: 550px;
height: 40px;
background-color: rgb(0, 255, 98);
}
.sousuo2{
float: right;
width: 300px;
height: 40px;
background-color: rgb(10, 30, 92);
}
.toutiaolianjie{
float: left;
width: 1180px;
height: 75px;
background-color: #c9141d;
margin-top: 26px;
}
.guanggaolan{
float: left;
width: 1180px;
height: 100px;
background-color: #DEE1EA;
margin-top: 20px;
}
.guanggaolan1{
float: left;
width: 1030px;
height: 100px;
background-color: rgb(99, 75, 155);
}
.guanggaolan2{
float: right;
width: 144px;
height: 100px;
background-color: rgb(10, 30, 92);
}
.xinwen{
float: left;
width: 1180px;
height: 1150px;
background-color: rgb(71, 71, 71);
margin-top: 20px;
}
.imgxinwen{
float: left;
width: 320px;
height: 1120px;
background-color: rgb(255, 123, 123);
}
.bigimg{
float: left;
width: 320px;
height: 213px;
background-color: rgb(251, 0, 0);
}
.smallimg{
float: left;
width: 320px;
height: 320px;
background-color: rgb(251, 0, 0);
margin-top: 10px;
}
.smallimgtable{
float: left;
width: 320px;
height: 320px;
background-color: rgb(0, 153, 255);
}
.smallimgall{
float: left;
width: 155px;
height: 155px;
background-color: rgb(163, 163, 163);
}
.shipinbiaoti{
float: left;
width: 320px;
height: 20px;
background-color: rgb(163, 163, 163);
margin-top: 30px;
}
.shipin1{
float: left;
width: 320px;
height: 160px;
background-color: rgb(123, 255, 0);
margin-top: 12px;
}
.leftnews1{
float: left;
width: 320px;
height: 70px;
background-color: rgb(55, 0, 255);
margin-top: 15px;
}
.shipin2{
float: left;
width: 320px;
height: 104px;
background-color: rgb(123, 255, 0);
margin-top: 30px;
}
.leftnews2{
float: left;
width: 320px;
height: 127px;
background-color: rgb(230, 54, 186);
margin-top: 15px;
}
.textxinwen{
float: left;
width: 440px;
height: 1120px;
background-color: rgb(30, 255, 49);
margin-left: 25px;
}
.textnewsall{
float: left;
background-color: rgb(0, 202, 185);
}
.textnews1{
float: left;
width: 440px;
height: 225px;
background-color: rgb(0, 202, 185);
}
.textnews1,.textnews2,.textnews3,.textnews4,.textnews5{
float: left;
width: 440px;
height: 180px;
background-color: rgb(177, 106, 167);
margin-top: 30px;
}
.textnews6{
float: left;
width: 440px;
height: 20px;
background-color: rgb(177, 106, 167);
margin-top: 30px;
}
.biaotilan{
float: right;
width: 300px;
height: 1120px;
background-color: rgb(72, 52, 255);
}
.right1{
float: left;
width: 300px;
height: 450px;
background-color: rgb(217, 255, 0);
}
.right2{
float: left;
width: 300px;
height: 250px;
background-color: rgb(217, 255, 0);
margin-top: 12px;
}
.right3{
float: left;
width: 300px;
height: 414px;
background-color: rgb(217, 255, 0);
margin-top: 10px;
}
脑袋要炸了，继续完善！
【HTML&CSS】搜狐页面代码编写的更多相关文章
- js、css动态压缩页面代码
1.js.css动态压缩页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...
- html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...
- html页面 代码 编写的 一些 基本素养 约定 知识点
hmtl代码书写也要养成一段一段的 区块代码, 每个区块代码 进行 html的 功能注释 自由文字的获得: (lorem ipsum: 乱数假文, 哑元文字) lorem ipsum: lipsum等 ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- （转）Asp.net页面生命周期详解任我行（1）-小试牛刀，编写页面代码
原文地址:http://www.cnblogs.com/xuyubing/archive/2013/10/01/3348344.html 前言 很久很久以前,还是我在学校的时候,我就看了传智里面视频, ...
- Asp.net页面生命周期详解任我行（1）-小试牛刀，编写页面代码
前言 很久很久以前,还是我在学校的时候,我就看了传智里面视频,学习了一下Asp.net页面生命周期,当时看的时候,因为内功不够深厚,看起来很吃力,现在回头温习了一下,还是有点收获的,于是想用博客记录一 ...
- 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 搜狐云景paas平台实践之路
前言: 搜狐云景作为搜狐的paas平台,在2014年5月22日的云计算大会上正式发布了公测.初测,注册用户必须先申请邀请码参与公测会赠送用户100元电子券,经过实名认证之后会再赠送100电子券,目测可 ...
随机推荐
- [JavaScript] 根据字符串宽度截取字符串
/** * 根据字符串宽度截取字符串 * @param desc 原始字符串 * @param width 该显示的宽度 * @param fontsize 字体大小 12px * @returns ...
- cas单点登陆系统-建立单点登陆系统的应用
上一篇如果已经操作成功,说明casServer已经实现了,下面就是搭建casClient与casServer联合调试.代码已经上传到github上.你可以下载看看,如果自己在搭建的过程中遇到问题,你也 ...
- 【C#小知识】C#中一些易混淆概念总结---------数据类型存储，方法调用，out和ref参数的使用
这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框架类库) 这些类是微软 ...
- C/C++ -- Gui编程 -- Qt库的使用 -- 对话框QDialog
模态对话框 -----源文件main.cpp(工程QtDialog)----- #include "qtdialog.h" #include <QApplication> ...
- Storm：分布式流式计算框架
Storm是一个分布式的.高容错的实时计算系统.Storm适用的场景: Storm可以用来用来处理源源不断的消息,并将处理之后的结果保存到持久化介质中. 由于Storm的处理组件都是分布式的,而且处理 ...
- PL/SOL csv格式导出查询结果时出现某些列的数据被四舍五入了的解决办法
昨天用pl/sql从oracle数据库捞取数据时,发现导出的csv格式中某些列的数据被进行了四舍五入处理了,当然这些列都是纯数字的,百思不得其解,后来上网才,才得知了原因. 这并不是导出的CSV文件数 ...
- 问题集录--从初级java程序员到架构师，从小工到专家
怎样学习才能从一名Java初级程序员成长为一名合格的架构师,或者说一名合格的架构师应该有怎样的技术知识体系,这是不仅一个刚刚踏入职场的初级程序员也是工作三五年之后开始迷茫的老程序员经常会问到的问题.希 ...
- 关于webapi加入Route引用出现问题的解决方案
首先在程序包管理器控制台运行安装MVC5.0,因为[Route("/api/..")]只会存在于MVC5.0中间,运行 Install-Package Microsoft.Asp ...
- Directory文件类
创建一个新文件 Directory.CreateDirectory(@"C: \Users\enle\Desktop\new");//路径 Console.WriteLine(&q ...
- SEO记录-1
第一天 formal dressesformal dresses 2013formal dresses salecheap formal dressesformal dresses onlinefor ...