经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
从项目中学习HTML+CSS
来源：cnblogs　　作者：masimaro　　时间：2018/11/11 10:19:00　　对本文有异议

最近由于工作原因以及自己的懈怠，已经很久都没有更新过博客了。通过这段时间，我发现坚持一件事情是真的很难，都说万事开头难，但是在放弃这件事上好像开头了后面就顺理成章的继续下去了。中间即使不怎么情愿也在努力的每周更新博客，但是自从9月份以来，第一次因为工作需要加班而断更之后，后面好像很容易找到理由断更。从这件事上我学到了一点：在坚持一件事的时候千万要坚持，只要中间放弃一次，后续就可以心安理得的将其抛之脑后。这次在这里也是希望自己能够再次坚持之前的每周至少一更。即使没有内容。。。。
感想就这么多，现在进入真正的主题——HTML+CSS相关内容的整理，因为网上针对HTML+CSS的相关知识已经很多了，而且都是很零碎的点，大多是对应的代码，也可以说是应用性极强的，我本人是不太喜欢大段大段的帖代码的。学习的过程中我喜欢从理论或者从实践开始，根据需求或者理论来写代码，需求清楚了，流程出来了，代码就是水到渠成的事。所以这次就根据具体的一个网页项目来梳理一下我这段时间学习这些东西的成果。

最终的效果图如下:
效果图

我希望自己通过对Web开发的学习能够自己独立的开发一套博客系统，因此我在选择练手项目的时候主要找的是博客的相关页面。这是从站长之家上找的一个博客网站模板的首页，它相对其他的模板来说显的比较中规中矩，而且对初学者来说实现起来更加简单。

基本布局

从大体上看，它可以分为几个部分：
区域划分

大体上分为3个部分，头部、内容部分，以及下方的页脚部分。
头部可以分为上面的标题以及下方的导航部分，内容部分又可以分为左边和右边两个部分。然后根据区域的划分，可以写下大体的代码:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.             <meta charset="UTF-8">
  5.             <title>CSS + HTML项目博客首页</title>
  7.             <meta charset="utf-8">
  8.         <link rel="stylesheet" type="text/css" href="css/style.css">
  9.     </head>
  10.   <body>
  11.          <!--顶部-->
  12.            <div class = "header">
  13.                   <div class = "title">
  14.                   </div>
  15.                   <div class = "nav">
  16.                   </div>
  17.       </div>
  19.             <div class = "container">
  20.                     <div class = "left">
  21.                     </div>
  22.                   <div class = "right">
  23.                   </div>
  24.          </div>
  26.         <!--底部-->
  27.         <div class = "footer">
  29.         </div>
  30.     </body>
  31. </html>

然后再使用CSS的样式规定具体的布局颜色:

  1. *{
  2.     margin:auto; /*只有设置了对应的宽度，才会默认居中*/
  3.     padding:0px;
  4.     font-family: "Microsoft YaHei","微软雅黑","Lantinghei SC","Open Sans",Arial,"Hiragino Sans GB","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif;
  5. }
  7. .header{
  8.     margin-top:15px;
  9. }
  11. .title{
  12.     height: 20px;
  13.     line-height: 15px;
  14.     width:1200px;
  15.     color:#999;
  16. }
  18. .nav{
  19.     width:1200px;
  20.     margin-top:8px;
  21. }
  23. .container{
  24.     width:1200px;
  25.     margin-top:15px;
  26. }
  28. .left{
  29.     float:left;
  30.     width:820px;
  31. }
  33. .right{
  34.     float:left;
  35.     margin-left:20px;;
  36. }
  38. .footer{
  39.     height:60px;
  40.     width:100%;
  41.     background-color:#fff;
  42.     text-align: center;
  43.     padding-top:24px;
  44.     font-size:12px;
  45.     color:#999;
  46. }

这里有一个问题，我当时一直以为margin:auto;这个会直接将对应的元素居中，但是我在实践中发现它好像并没有，原来当时我忘记了设置元素的宽度，而元素默认的宽度是与父元素相同的，这样就导致margin:auto这个属性认为不需要给外边距，所以也就没有居中，只有给了宽度，它才会将元素相对于父元素居中。

导航栏的实现

这里导航栏使用无序列表 + a链接来实现，我们先写上对应的HTML代码

  1. <ul>
  2.         <li><a href="index.html">首页</a></li>
  3.         <li><a href="index.html">列表页</a></li>
  4.         <li><a href="index.html">详细页</a></li>
  5.         <li><a href="index.html">404</a></li>
  6.         <li><a href="index.html">MZ-NetBlog主题</a></li>
  7.         <li><a href="index.html">IT技术笔记</a></li>
  8.         <li><a href="index.html">源码分享</a></li>
  9.         <li><a href="index.html">靠谱网赚</a></li>
  10.         <li style = "margin-right: 0px;"><a href="index.html">资讯分享</a></li>
  11. </ul>

然后通过CSS样式来调整

  1. /*先去掉列表前的小圆点*/
  2. .nav ul {
  3.     list-style-type: none;
  4. }
  6. /*让列表项左浮动，以便导航项可以横向排列，同时设置右外边距，让各项可以分割开来*/
  7. .nav ul li{
  8.     float:left;
  9.     margin-right:34px;
  10. }
  12. /*上述内容已经有了导航栏的雏形，剩下的就是设置导航项的字体、颜色、以及点击的相关属性*/
  13. .nav ul li a{
  14.     text-decoration:none;
  15.     color:#999;
  16.     font-size:18px;
  17. }
  19. .nav ul li a:hover{
  20.     color:lightskyblue;
  21. }
  23. .nav ul li a:active{
  24.     color:lightskyblue;
  25. }

通过上述的简单的CSS就可以制作对应的导航栏了

左上角标签页的制作

从原始的网页效果图来看，标签页可以看成上下两个部分，上方是一个导航栏，而下方则是一个div，这个div根据点击导航上的具体项来显示不同的内容。因此它的大致内容结构可以用下面的HTML来定义

  1. <div class = "about">
  2.     <!--上方是一个导航栏-->
  3.         <div class = "tab-header">
  4.                 <ul>
  5.                         <li><a href = "#" style = "color:lightskyblue;background-color:#fff;">统计信息</a></li>
  6.                         <li><a href = "#">联系站长</a></li>
  7.                 </ul>
  8.         </div>
  10.     <!--下方是用来显示具体的内容-->
  11.         <div class = "info">
  12.             <p>日志总数:888篇</p>
  13.             <p>网站运行:88天</p>
  14.         </div>
  15. </div>

上方的导航可以沿用之前的导航栏的CSS代码，而下方只需要设置对应的北京颜色即可，这里就不再贴出了

文章列表

文章列表采用的仍然是列表的方式，我们可以针对列表的每个项设置对应的边框，以及长度和宽度即可。下面只贴出对应的CSS代码

  1. /**列表本身属性**/
  2. .article-list{
  3.     width:820px;
  4.     height:960px;
  5.     background-color:#fff;
  6.     margin-top:15px;
  7. }
  9. /**列表项属性**/
  10. .article{
  11.     width:820px;
  12.     height: 192px;
  13.     border-top: solid 1px rgb(234,234,234);
  14. }

文章项的制作

文章列表中有具体的文章项，这个文章项可以简单的分为几个部分：图片、标题、文章属性等等内容、文章的摘要；在这里我将它们都作为同级元素，然后调整浮动以及大小，它自然就会按照这样的布局进行排列。

  1. <div class ="article">
  2.     <a class = "article-img"><img src = "images/article.jpg"></a>
  4.         <div class = "label">
  5.             <div class = "rect"><span>MZ-NetBlog主题</span></div>
  6.                 <div class = "arrow"></div>
  7.                 <a href = "#">用DTcms做一个独立博客网站（响应式模板）</a>
  8.         </div>
  10.         <div class = "time-watch-comment">
  11.             <span class = "time"><img src = "images/clock.jpg"><span>2018-11-06</span></span>
  12.                 <span class = "watch"><img src = "images/eye.jpg"><span>666</span></span>
  13.                 <span class = "comment"><img src = "images/comment.jpg"><span>4</span></span>
  14.       </div>
  16.       <p>用DTcms做一个独立博客网站（响应式模板），采用DTcms V4.0正式版（MSSQL）。开发环境：SQL2008R2+VS2010。DTcms V4.0正式版功能修复和优化：1、favicon.ico图标后台上传。（解决要换图标时要连FTP或者开服务器的麻烦）</p>
  17. </div>

这个部分我感觉最需要提出来的是对标签的制作，这里的标签是文章标题前面的那个蓝色背景，白色字体的矩形后带有箭头的东西，这个的制作我采用的是前方一个

标签，而后方利用另一个div 来制作的小箭头。
想要制作小箭头首先需要回归一下CSS中讲到的border属性，我们知道border表示的是边框，我们可以通过设置border的值来规定边框的大小颜色等等属性，那么当我们在四个边上都规定边框的时候，边框是如何来显示的呢，我们写下如下的实例

  1. <div class = "div1"></div>
  1. .div1{
  2.         width:100px;
  3.                 height:100px;
  4.                 background: orange;
  5.                 float: left;
  6.                 border-top:10px solid black;
  7.                 border-bottom:12px solid green;
  8.                 border-left:15px solid red;
  9.                 border-right:20px solid blue;
  10.                 border-style: solid;
  11. }

刷新浏览器，我们发现它产生的是这样的一个效果
border-style 实验
之前在学习的时候我一直实验的是border为1个像素，但是没想到给边框加粗后能产生这样的效果，它能够产生这样一种像话框的效果，随着边框的加粗，中间的内容越小，而这个画框的边框就越大。这个时候很容易就产生一种想法，随着边框的加粗，最终上下或者左右边框完全占据元素的所有空间，而另一侧为空，那么就可以产生一个类似于箭头的效果，根据这个想法，我们再修改一下上面的CSS代码

  1. .div1{
  2.                 width:0px;
  3.                 height:0px;
  4.                 border-top:50px solid black;
  5.                 border-bottom:50px solid green;
  6.                 border-left:15px solid red;
  7.                 border-style: solid;
  8. }

这个时候它的效果如下:
箭头图标的雏形
这样我们把上下两个边框的眼色设置为父元素的背景色，左边框设置为需要的颜色，就可以做一个小的箭头了。而要调整它的宽度、角度等等只需要调整上下边框的宽度即可。下面是箭头最终的CSS代码

  1. /*方向向右的小箭头*/
  2. .arrow{
  3.     float:left;
  4.     background-color:#fff;
  5.     width:0;
  6.     height:0;
  7.     border-top:5px solid transparent;
  8.     border-bottom: 5px solid transparent;
  9.     border-left: 6px solid #3399CC;
  10.     margin-top: 31px;
  11. }

搜索框的实现

这个搜索框我简单的使用了一个带边框的文本输入框加一个按钮。它的HTML代码如下:

  1. <input class = "search-box" type = "text" value = "请输入关键字"/>
  2. <input class = "search-submit" type = "submit" value = "搜索"/>

对应的CSS代码如下:

  1. .search-box{
  2.     width:258px;
  3.     height:34px;
  4.     border:solid 1px rgb(51, 153, 204);
  5.     margin-top:7px;
  6.     margin-left:22px;
  7.     margin-right:0px;
  8.     color:#999;
  9.     padding-left:9px;
  10. }
  12. .search-submit{
  13.     width:52px;
  14.     height:36px;
  15.     background-color:rgb(51, 153, 204);
  16.     border-style:none;
  17.     margin-left:-4px;
  18.     color:#fff;
  19. }

项目后记

这个页面虽然说完成了，但是也是有一些不足的地方：

  • 页面中几乎每一个元素写了它的属性，而且有的属性是几乎类似的，代码只是简单的完成了页面没有考虑到重用
  • 页面是静态的，简单的利用HTML+CSS来做展示，没有交互的东西，而原始的模板是有的，交互这个的部分我想学习了JavaScript 和 JQuery之后再来加

虽然我主要用C/C++ 与Python做过一些服务程序和其他的Web程序，但是对于前端的相关内容也仅仅是会用HTML，关于布局和CSS的东西几乎不懂，而这次我想抽点时间学习一下这方面的内容。

为什么会想要学习前端呢？之前不知道在哪看到这么一句话: "黑客一定是程序员，而程序员不一定是黑客", 作为一个初步迈入Web安全大门的我来说，想要深入Web安全就必须学会Web开发，而Web开发是绕不开前端的。虽然不要求有很高的前端水平，但是基本的布局、css、JavaScript、jQuery还是得会的，所以我想先抽点时间好好补一下这方面的内容。

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

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号