HTML+CSS静态博客
本文共 5870 字，大约阅读时间需要 19 分钟。
版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54837849
最近学习了HTML和CSS的一些简答的语法，今天写了一个简单的项目，其实也算不上什么项目，只是一个静态博客，效果图如下：
这个页面使用了所谓的HTML+CSS+div来完成，看起来比之前写的hao123要好看的多，但是其实也写起来也不是很麻烦。视频中的老师说他录这节视频只用了一个多小时的时间，而我写这个网页却写了将近一天的时间。这这是最简单的网页，很多效果都还没有用到，只是在编写这个网页的同时可以了解一些设计网页的思路。
可以从github下载该网页的源码 下面附上这个网页的源码：css实战1 LinuxCast.net Demo Site
LinuxCast.net演示页面，Linux学习不再晦涩难懂
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
示例标题示例标题
作者:twilight 日期：2017-2-2
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
推荐文章
- 推荐文章1
- 推荐文章2
- 推荐文章3
- 推荐文章4
- 推荐文章5
- 推荐文章6
访客100
文章数100
CSS样式文件：
body{ background-image:url("2.jpg");}/*-------------头部-------------*/#header{ width:960px; color:white; border-bottom:dashed 1px white; margin:0 auto; margin-bottom:10px;}.logo_title{ float:left;}.logo_title h3{ font-size:30px; margin-top:14px; font-family:"Adobe Garamond Pro Bold" "宋体";}.logo_title p{ font-size:20px;}/*---------------------------------*/.navi{ float:right; margin-top:66px;}.navi a{ color:white; text-decoration:none;}.navi ul { list-style:none;}.navi ul li{ display:inline; margin-right:8px; border:1px solid white; padding:4px 8px; border-radius:6px; background-color:rgba(255,255,255,0.15);}.clear{ clear:both;}/*----------------主体-----------------*/#wrapper{ width:960px; margin:0 auto; margin-bottom:15px;}.main{ width:610px; background-color:white; border-radius:8px; float:left; padding:20px;}.item_img{ float:left; margin:10px; margin-top:4px;}.item_img img{ width:80px; height:80px;}.item_content{ margin-left:100px;}.item_content h3{ font-size:22px; color:#a5612d; margin:0;}.item_info{ font-size:12px; font-style:italic; margin:0; color:#999;}.item_desc{ font-size:14px; margin:0; color:gray; margin-top:10px; padding-left:5px; border-left:solid 1px #999;}.item{ border-bottom:dashed 1px #999; padding :20px;}.sidebar{ width:300px; background-color:white; border-radius:8px; float:right; padding-top:10px;}.author_img img{ width:120px; height:120px; border-radius:10px;}.author_img{ width:120px; height:120px; margin: 0 auto;}.author_info{ margin: 10px 10px; padding:0; border:solid #ddd 1px; border-radius:8px; background-color:#eee;}.author_info h4{ margin:0; padding:0; text-align:center; font-weight:bold;}.article h3{ font-style:italic; margin-left:10px; border-bottom:dashed 1px #aaa; padding-bottom:4px;}.article ul { list-style:none; padding:0; margin-left:40px;}.site_info{ border-top :dashed 1px #aaa;}.site_info p { text-align:center; font-size:12px; color:gray;}/*---------------尾部-----------------*/#footer{ width:960px; height:100px; margin:0 auto; background-color:bluee; border-top:dashed white 1px;}#footer .left{ color:white; float:left; margin-top:10px;}#footer .right{ color:white; float:right; font-size:14px;}#footer .right ul { margin-top:10px; list-style:none;}#footer .right ul li { display:inline-block; margin-right:5px;}
你可能感兴趣的文章
深入理解 Java 虚拟机
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的？
查看>>
<三体> 给岁月以文明, 给时光以生命
查看>>
Android开发 - 掌握ConstraintLayout（九）分组(Group)
查看>>
springboot+logback日志异步数据库
查看>>
Typescript教程之函数
查看>>
Android 高效安全加载图片
查看>>
vue中数组变动不被监测问题
查看>>
3.31
查看>>
类对象定义 二
查看>>
收费视频网站Netflix：用户到底想要“点”什么？
查看>>
MacOS High Sierra 12 13系统转dmg格式
查看>>
关于再次查看已做的多选题状态逻辑问题
查看>>
js--知识点dailyskill
查看>>
动态下拉菜单,非hover
查看>>
政府安全资讯精选 2017年第十六期 工信部发布关于规范互联网信息服务使用域名的通知；俄罗斯拟建立备用DNS；Google打击安卓应用在未经同意情况下收集个人信...
查看>>
推荐一个非常好用的 MarkDown 编辑器！
查看>>