经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
【HTML&CSS】搜狐页面代码编写
来源：cnblogs　　作者：时孚　　时间：2018/10/29 9:37:09　　对本文有异议 
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!-->
  6. <html class="no-js">
  7. <!--<![endif]-->
  8.  
  9. <head>
  10.     <meta charset="utf-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.     <title>搜狐首页</title>
  13.     <meta name="description" content="">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1">
  15.     <link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
  16.     <link rel="stylesheet" href="./sohu.css">
  17. </head>
  18.  
  19. <body>
  20.     <div class="top">
  21.         <div class="logo">
  22.             <div class="logoimg">
  23.                 图标
  24.             </div>
  25.             <div class="dapp">
  26.                 下载app
  27.             </div>
  28.         </div>
  29.     </div>
  30.     <div class="mast">
  31.         <!-- 第一部分 -->
  32.         <div class="sousuo">
  33.             <div class="sousuo1">
  34.                 搜索1
  35.             </div>
  36.             <div class="sousuo2">
  37.                 搜索2
  38.             </div>
  39.         </div>
  40.         <!-- 第二部分 -->
  41.         <div class="toutiaolianjie">
  42.             头条链接
  43.         </div>
  44.         <!-- 第三部分 -->
  45.         <div class="guanggaolan">
  46.             <div class="guanggaolan1">
  47.                 广告1
  48.             </div>
  49.             <div class="guanggaolan2">
  50.                 广告2
  51.             </div>
  52.         </div>
  53.         <!-- 第四部分 -->
  54.         <div class="xinwen">
  55.             <!-- 第四部分第一列  图片新闻-->
  56.             <div class="imgxinwen">
  57.                 <div class="bigimg">
  58.                     大图新闻
  59.                 </div>
  60.                 <!-- 小图新闻 -->
  61.                 <div class="smallimg">
  62.                     <table class="smallimgtable">
  63.                         <tr>
  64.                             <td>
  65.                                 <div class="smallimgall smallimg1">
  66.                                     小图标题新闻1
  67.                                 </div>
  68.                             </td>
  69.                             <td>
  70.                                 <div class="smallimgall smallimg2">
  71.                                     小图标题新闻2
  72.                                 </div>
  73.                             </td>
  74.                         </tr>
  75.                         <tr>
  76.                             <td>
  77.                                 <div class="smallimgall smallimg3">
  78.                                     小图标题新闻3
  79.                                 </div>
  80.                             </td>
  81.                             <td>
  82.                                 <div class="smallimgall smallimg4">
  83.                                     小图标题新闻4
  84.                                 </div>
  85.                             </td>
  86.                         </tr>
  87.                     </table>
  88.                 </div>
  89.                 <!--  视频标题栏 -->
  90.                 <div class="shipinbiaoti">
  91.                     视频标题栏
  92.                 </div>
  93.                 <!--  视频 -->
  94.                 <div class="shipin1">
  95.                     大视频
  96.                 </div>
  97.                 <div class="leftnews1">
  98.                     文字新闻
  99.                 </div>
  100.                 <div class="shipin2">
  101.                     视频2
  102.                 </div>
  103.                 <div class="leftnews2">
  104.                     文字新闻2
  105.                 </div>
  106.             </div>
  107.             <!-- 第四部分第二列  中间部分文字新闻-->
  108.             <div class="textxinwen">
  109.                 <div class="textnewsall textnews1">
  110.                     新闻标题8条
  111.                 </div>
  112.                 <div class="textnewsall textnews2">
  113.                     新闻标题6条
  114.                 </div>
  115.                 <div class="textnewsall textnews3">
  116.                     新闻标题6条
  117.                 </div>
  118.                 <div class="textnewsall textnews4">
  119.                     新闻标题6条
  120.                 </div>
  121.                 <div class="textnewsall textnews5">
  122.                     新闻标题6条
  123.                 </div>
  124.                 <div class="textnewsall textnews6">
  125.                     新闻标题1条
  126.                 </div>
  127.             </div>
  128.             <!-- 第四部分第三列 右侧内容标题-->
  129.             <div class="biaotilan">
  130.  
  131.                 <div class="right1">
  132.                     换一换广告
  133.                 </div>
  134.                 <div class="right2">
  135.                     图片广告
  136.                 </div>
  137.                 <div class="right3">
  138.                     24小时热文
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143.     <!-- 第五部分 -->
  144.  
  145.     <script src="" async defer></script>
  146. </body>
  147.  
  148. </html>

 

看完一整本书，结果写不出什么东西，按书上教程来，基本能把例子完成个七七八八，可是用padding还是margin完全整不清……，而且只要结构一复杂，元素就各种不受控制。

没办法 找来韩顺平老师的视频（没错，就是在网上不知道怎么搞来的）

看完老师讲完整个html&CSS部分2，终于把这个内容吃透了。

韩顺平老师讲课最后一个用例就是还原搜狐门户网站的首页HTML和css部分，虽然视频中他的是n年前的网站页面，蛋根本不妨碍我完成完成现在版本的搜狐页面 。

 第一次看完视频，写的乱七八糟，很多东西摆不到应有的地方，没办法，在浏览器按f12键，查看人家的源代码，发现很多东西用了ul和li的组合插入文字，图片，而是原来HTML和css组合也没这么难，大神的代码实现也是很平凡很淡。

很多收获记手机上，回头整理发这里。

我做出来的效果图是这样的：

代码如下：

  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!-->
  6. <html class="no-js">
  7. <!--<![endif]-->
  8.  
  9. <head>
  10.     <meta charset="utf-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.     <title>搜狐首页</title>
  13.     <meta name="description" content="">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1">
  15.     <link rel="Shortcut Icon" href="./META-INF/images/souhulogo.png" />
  16.     <link rel="stylesheet" href="./sohu.css">
  17. </head>
  18.  
  19. <body>
  20.     <div class="top">
  21.         <div class="logo">
  22.             <div class="logoimg">
  23.                 图标
  24.             </div>
  25.             <div class="dapp">
  26.                 下载app
  27.             </div>
  28.         </div>
  29.     </div>
  30.     <div class="mast">
  31.         <!-- 第一部分 -->
  32.         <div class="sousuo">
  33.             <div class="sousuo1">
  34.                 搜索1
  35.             </div>
  36.             <div class="sousuo2">
  37.                 搜索2
  38.             </div>
  39.         </div>
  40.         <!-- 第二部分 -->
  41.         <div class="toutiaolianjie">
  42.             头条链接
  43.         </div>
  44.         <!-- 第三部分 -->
  45.         <div class="guanggaolan">
  46.             <div class="guanggaolan1">
  47.                 广告1
  48.             </div>
  49.             <div class="guanggaolan2">
  50.                 广告2
  51.             </div>
  52.         </div>
  53.         <!-- 第四部分 -->
  54.         <div class="xinwen">
  55.             <!-- 第四部分第一列  图片新闻-->
  56.             <div class="imgxinwen">
  57.                 <div class="bigimg">
  58.                     大图新闻
  59.                 </div>
  60.                 <!-- 小图新闻 -->
  61.                 <div class="smallimg">
  62.                     <table class="smallimgtable">
  63.                         <tr>
  64.                             <td>
  65.                                 <div class="smallimgall smallimg1">
  66.                                     小图标题新闻1
  67.                                 </div>
  68.                             </td>
  69.                             <td>
  70.                                 <div class="smallimgall smallimg2">
  71.                                     小图标题新闻2
  72.                                 </div>
  73.                             </td>
  74.                         </tr>
  75.                         <tr>
  76.                             <td>
  77.                                 <div class="smallimgall smallimg3">
  78.                                     小图标题新闻3
  79.                                 </div>
  80.                             </td>
  81.                             <td>
  82.                                 <div class="smallimgall smallimg4">
  83.                                     小图标题新闻4
  84.                                 </div>
  85.                             </td>
  86.                         </tr>
  87.                     </table>
  88.                 </div>
  89.                 <!--  视频标题栏 -->
  90.                 <div class="shipinbiaoti">
  91.                     视频标题栏
  92.                 </div>
  93.                 <!--  视频 -->
  94.                 <div class="shipin1">
  95.                     大视频
  96.                 </div>
  97.                 <div class="leftnews1">
  98.                     文字新闻
  99.                 </div>
  100.                 <div class="shipin2">
  101.                     视频2
  102.                 </div>
  103.                 <div class="leftnews2">
  104.                     文字新闻2
  105.                 </div>
  106.             </div>
  107.             <!-- 第四部分第二列  中间部分文字新闻-->
  108.             <div class="textxinwen">
  109.                 <div class="textnewsall textnews1">
  110.                     新闻标题8条
  111.                 </div>
  112.                 <div class="textnewsall textnews2">
  113.                     新闻标题6条
  114.                 </div>
  115.                 <div class="textnewsall textnews3">
  116.                     新闻标题6条
  117.                 </div>
  118.                 <div class="textnewsall textnews4">
  119.                     新闻标题6条
  120.                 </div>
  121.                 <div class="textnewsall textnews5">
  122.                     新闻标题6条
  123.                 </div>
  124.                 <div class="textnewsall textnews6">
  125.                     新闻标题1条
  126.                 </div>
  127.             </div>
  128.             <!-- 第四部分第三列 右侧内容标题-->
  129.             <div class="biaotilan">
  130.  
  131.                 <div class="right1">
  132.                     换一换广告
  133.                 </div>
  134.                 <div class="right2">
  135.                     图片广告
  136.                 </div>
  137.                 <div class="right3">
  138.                     24小时热文
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143.     <!-- 第五部分 -->
  144.  
  145.     <script src="" async defer></script>
  146. </body>
  147.  
  148. </html>

css（html文件和css文件放同一个目录层下）：

  1. body {
  2.   margin: 0 auto;
  3.   border: 1px solid red;
  4. }
  5. .mast {
  6.   margin: 0 auto;
  7.   width: 1180px;
  8.   background-color: rgb(88, 88, 88);
  9. }
  10. .top {
  11.   background-color: #222222;
  12.   height: 30px;
  13. }
  15. .logo {
  16.   width: 1180px;
  17.   margin: 0 auto;
  18.   background-color: yellow;
  19. }
  20.  
  21. /* 从这里开始一律采用左/右浮动 */
  22. .logoimg {
  23.   float: left;
  24.   width: 145px;
  25.   height: 95px;
  26.   background-color: #25c058;
  27. }
  28. .dapp {
  29.   float: right;
  30.   width: 160px;
  31.   background-color: yellow;
  32. }
  34. .sousuo{
  35.     float: right;
  36.     width: 940px;
  37.     height: 40px;
  38.     background-color: #174b12;
  39.     margin-top: 25px;
  40. }
  41. .sousuo1{
  42.     float: left;
  43.     width: 550px;
  44.     height: 40px;
  45.     background-color: rgb(0, 255, 98);
  46. }
  47. .sousuo2{
  48.     float: right;
  49.     width: 300px;
  50.     height: 40px;
  51.     background-color: rgb(10, 30, 92);
  52. }
  54. .toutiaolianjie{
  55.     float: left;
  56.     width: 1180px;
  57.     height: 75px;
  58.     background-color: #c9141d;
  59.     margin-top: 26px;
  60. }
  61. .guanggaolan{
  62.     float: left;
  63.     width: 1180px;
  64.     height: 100px;
  65.     background-color: #DEE1EA;
  66.     margin-top: 20px;
  67. }
  69. .guanggaolan1{
  70.     float: left;
  71.     width: 1030px;
  72.     height: 100px;
  73.     background-color: rgb(99, 75, 155);
  74. }
  75. .guanggaolan2{
  76.     float: right;
  77.     width: 144px;
  78.     height: 100px;
  79.     background-color: rgb(10, 30, 92);
  80. }
  81. .xinwen{
  82.     float: left;
  83.     width: 1180px;
  84.     height: 1150px;
  85.     background-color: rgb(71, 71, 71);
  86.     margin-top: 20px;
  87. }
  89. .imgxinwen{
  90.     float: left;
  91.     width: 320px;
  92.     height: 1120px;
  93.     background-color: rgb(255, 123, 123);
  94. }
  96. .bigimg{
  97.     float: left;
  98.     width: 320px;
  99.     height: 213px;
  100.     background-color: rgb(251, 0, 0);
  101. }
  103. .smallimg{
  104.     float: left;
  105.     width: 320px;
  106.     height: 320px;
  107.     background-color: rgb(251, 0, 0);
  108.     margin-top: 10px;
  109. }
  111. .smallimgtable{
  112.     float: left;
  113.     width: 320px;
  114.     height: 320px;
  115.     background-color: rgb(0, 153, 255);
  116. }
  118. .smallimgall{
  119.     float: left;
  120.     width: 155px;
  121.     height: 155px;
  122.     background-color: rgb(163, 163, 163);
  123. }
  125. .shipinbiaoti{
  126.     float: left;
  127.     width: 320px;
  128.     height: 20px;
  129.     background-color: rgb(163, 163, 163);
  130.     margin-top: 30px;
  131. }
  133. .shipin1{
  134.     float: left;
  135.     width: 320px;
  136.     height: 160px;
  137.     background-color: rgb(123, 255, 0);
  138.     margin-top: 12px;
  139. }
  141. .leftnews1{
  142.     float: left;
  143.     width: 320px;
  144.     height: 70px;
  145.     background-color: rgb(55, 0, 255);
  146.     margin-top: 15px;
  147. }
  148. .shipin2{
  149.     float: left;
  150.     width: 320px;
  151.     height: 104px;
  152.     background-color: rgb(123, 255, 0);
  153.     margin-top: 30px;
  154. }
  156. .leftnews2{
  157.     float: left;
  158.     width: 320px;
  159.     height: 127px;
  160.     background-color: rgb(230, 54, 186);
  161.     margin-top: 15px;
  162. }
  164. .textxinwen{
  165.     float: left;
  166.     width: 440px;
  167.     height: 1120px;
  168.     background-color: rgb(30, 255, 49);
  169.     margin-left: 25px;
  170. }
  172. .textnewsall{
  173.     float: left;
  174.     background-color: rgb(0, 202, 185);
  175. }
  176. .textnews1{
  177.     float: left;
  178.     width: 440px;
  179.     height: 225px;
  180.     background-color: rgb(0, 202, 185);
  181. }
  182. .textnews1,.textnews2,.textnews3,.textnews4,.textnews5{
  183.     float: left;
  184.     width: 440px;
  185.     height: 180px;
  186.     background-color: rgb(177, 106, 167);
  187.     margin-top: 30px;
  188. }
  190. .textnews6{
  191.     float: left;
  192.     width: 440px;
  193.     height: 20px;
  194.     background-color: rgb(177, 106, 167);
  195.     margin-top: 30px;
  196. }
  198. .biaotilan{
  199.     float: right;
  200.     width: 300px;
  201.     height: 1120px;
  202.     background-color: rgb(72, 52, 255);
  203. }
  205. .right1{
  206.     float: left;
  207.     width: 300px;
  208.     height: 450px;
  209.     background-color: rgb(217, 255, 0);
  210. }
  212. .right2{
  213.     float: left;
  214.     width: 300px;
  215.     height: 250px;
  216.     background-color: rgb(217, 255, 0);
  217.     margin-top: 12px;
  218. }
  219. .right3{
  220.     float: left;
  221.     width: 300px;
  222.     height: 414px;
  223.     background-color: rgb(217, 255, 0);
  224.     margin-top: 10px;
  225. }

 脑袋要炸了，继续完善！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号