HTML+CSS静态博客

最近学习了HTML和CSS的一些简答的语法，今天写了一个简单的项目，其实也算不上什么项目，只是一个静态博客，效果图如下：

这个页面使用了所谓的HTML+CSS+div来完成，看起来比之前写的hao123要好看的多，但是其实也写起来也不是很麻烦。视频中的老师说他录这节视频只用了一个多小时的时间，而我写这个网页却写了将近一天的时间。这这是最简单的网页，很多效果都还没有用到，只是在编写这个网页的同时可以了解一些设计网页的思路。
可以从github下载该网页的源码网页源码
下面附上这个网页的源码：

<!DOCTYPE html><html>
<head><meta charset="utf-8"><meta name="keywords" content="博客实战"><meta name="description" content="htmlcss实战"><meta name="autor" content="twilight"><title>css实战1</title><link rel="stylesheet" type="text/css" href="css.css"/>
</head><body>
<!--头部-->
<div id="header"><div class="logo_title"><h3>LinuxCast.net Demo Site</h3><p>LinuxCast.net演示页面，Linux学习不再晦涩难懂</p></div><div class="navi"><ul><li><a href="">首页</a></li><li><a href="">闲言碎语</a></li><li><a href="">我是谁</a></li></ul></div><div class="clear"></div></div><!--中部-->
<div id="wrapper"><div class="main"><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div><div class="item"><div class="item_img"><img src="素材/1.png" alt="image"/></div><div class="item_content"><h3>示例标题示例标题</h3><p class="item_info">作者:twilight 日期：2017-2-2</p><p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p></div></div></div><div class="sidebar"><div class="author"><div class="author_img"><img src="3.jpg"/></div><div class="author_info"><h4>twilight</p><p>cease to struggle and you cease to live</p></div></div><div class="article"><h3>推荐文章</h3><ul><li>推荐文章1</li><li>推荐文章2</li><li>推荐文章3</li><li>推荐文章4</li><li>推荐文章5</li><li>推荐文章6</li></ul></div><div class="site_info"><p>访客100</p><p>文章数100</p></div></div><div class="clear"></div></div><!--尾部-->
<div id="footer"><div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div><div class="right"><ul><li>关于我们</li><li>联系我们</li><li>使用条款</li><li>意见反馈</li></ul></div>
</div>
</body>
</html>

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;
}

HTML+CSS静态博客相关推荐

jekyll静态博客提升访问速度：内嵌CSS，异步加载js，压缩HTML
在谷歌搜索的功能速度(实验性)中推荐使用工具PageSpeed Insights查看我的网页访问速度情况:PageSpeed Insights 分数很低,只有33分. 优化建议的第一条是移除阻塞渲染的 ...
umi脚手架搭建的项目_15天零成本搭建静态博客，托管于Github Page
博客地址技术栈概览前台:Umi(路由) + Antd(视图) + TypeScript(增加项目可维护性以及规范性) 后台:Umi(路由) + Antd(视图) + TypeScript(增加项目 ...
使用Hexo在Github搭建静态博客
为什么80%的码农都做不了架构师?>>> 1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/downloa ...
为静态博客生成器WDTP移植了一款美美哒主题
前言关于这个主题的移植后公布,我已经联系了主题作者并取得同意,这个主题是一夜涕所写的Sgreen,预览图见下关于WDTP 就是一个很方便很便携很快速的cpp编写的带gui跨平台的开源的静态博客生成 ...
GitHub Actions入门教程：自动化部署静态博客
前天,我使用 GitHub Actions 实现了静态博客的自动化部署,觉得它非常强大,只要你提交到 GitHub,后面的部署完全由 GitHub 自动完成. 这里提的静态博客,就是通过生成工具(eg ...
用 GitHub 搭建静态博客太繁琐？用这个小工具实现「傻瓜式」发布！
公众号关注「运维之美」设为「星标」,每天带你玩转 Linux ! 除了作为程序员们分享与协作的平台,GitHub 同时也是一个绝佳的知识分享平台.尤其近几年静态博客逐渐兴起,借助 GitHub 的 ...
[Hexo]Hexo+github搭建静态博客
1.简介 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章(经常玩CSDN上的人都知道),在几秒内,即可利用靓丽的主题生成静态网页.通过Hexo我 ...
腾讯云cos html,Docsify+腾讯云对象存储 COS，一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
静态博客 Hexo material 主题安装
静态博客 Hexo material 主题安装注意,这里介绍的 Material 主题是 1.5.2 的版本如果你还没有安装 Hexo,并且对它有兴趣,请前往 EasyHexo 这里将提供 Hex ...

HTML+CSS静态博客

HTML+CSS静态博客相关推荐

最新文章

热门文章