css-博客样式初体验
css学习一周后，写了个基础博客样式。
样式是出来了，但是在写的过程中感觉css写的杂乱无章，可能是写的太少了吧，条例不是很清除，只是在写的过程 中一个点一个点的套，感觉样式出来即可，没有做到由全局出发考虑再到局部，再到细节的考虑。
总共耗时4个小时，写的时候 html 部分头脑很清晰，可以做到心中有数，页面划分，标签的使用感觉很顺利成章。
但是在css部分，感觉很差，特别是在布局上，没有很好的规划（主要原因是对各属性值不太熟悉），不知道该属性有什么特征，导致后面的有些属性加进去后发现前面的影响了，又回头修改，前面的已修改又要修改其他地方影响的，反反复复。。。。
望博客园大佬给点技巧
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>blogDemo</title>
<link rel="stylesheet" type="text/css" media="screen" href="flexDemo.css" />
</head>
<body>
<header>
</header>
<nav>
<li>
<ul><a href="#">首页</a></ul>
<ul><a href="#">简介</a></ul>
<ul><a href="#">新闻</a></ul>
<ul><a href="#">事实</a></ul>
<ul><a href="#">联系</a></ul> </li>
</nav>
<div class="contain">
<div class="left">
<div leftContain>
<div class="leftContain">
<h3><a href="#" id="css2">CSS基础教程二</a></h3>
<h5>2019 年 5 月 13日</h5>
<p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串樣式列表、级联样式表、串接样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p>
</div>
<div class="leftContain">
<h3><a href="#" id="css1">CSS基础教程一</a></h3>
<h5>2019 年 5 月 10日</h5>
<p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串樣式列表、级联样式表、串接样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p>
</div>
<div class="leftContain">
<h3><a href="#">html基础教程一</a></h3>
<h5>2019 年 5 月 7日</h5>
<p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。</p>
</div>
<div class="leftContain">
<h3><a href="#">js基础教程一</a></h3>
<h5>2019 年 5 月 4日</h5>
<p>JavaScript，通常缩写为JS，是一种高级的，解释型语言的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。</p>
</div>
<div class="leftContain">
<h3><a href="#">vue基础教程一</a></h3>
<h5>2019 年 5 月 3日</h5>
<p>Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。 在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。</p>
</div>
<div class="leftContain">
<h3><a href="#">node.js基础教程一</a></h3>
<h5>2019 年 5 月 1日</h5>
<p>Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。Node.js由Node.js基金会持有和维护，并与Linux基金会有合作关系。</p>
</div> </div>
</div>
<div class="right">
<div class="rightContain">
<h3>关于我</h3>
<div id="fakeimg"><img src="../img/fakeimg.jpg" alt=""></div>
<p>唐子凡<br>9岁，比较胖眼角上有一个黑痣，妈妈叫他哭痣因为我很小的时候很好哭所以叫哭痣。在下课的时候很少有人和我玩，有人打我，我一般不打他但他打我3下我就要反击了。在学校是性格内向，在家里是性格暴躁。我是属鸡得，是处女座。</p>
</div>
<div class="rightContain labelName">
<h3>我的标签</h3>
<ul>
<li><a href="#">CSS基础教程</a></li>
<li><a href="#">html基础教程</a></li>
<li><a href="#">js基础教程</a></li>
<li><a href="#">vue基础教程</a></li>
<li><a href="#">node.js基础教程</a></li>
</ul>
</div>
<div class="rightContain article">
<h3>最新文章</h3>
<ul>
<li><a href="#css1">CSS基础教程一</a></li>
<li><a href="#css2">CSS基础教程二</a></li>
<li><a href="#">CSS基础教程三</a></li>
<li><a href="#">CSS基础教程四</a></li>
<li><a href="#">CSS基础教程五</a></li>
</ul>
</div>
</div>
</div>
<footer>
<div class="sitLink">
<ul>
<li><a href="#">精选内容</a></li>
<li><a href="#">热门问答</a></li>
<li><a href="#">热门专栏</a></li>
<li><a href="#">最新文章</a></li>
<li><a href="#">最新活动</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">服务条款</a></li>
</ul>
</div>
<div id="copyright">Copyright © 2011-2019 FlexDemo. 当前呈现版本 19.02.27 <br>
浙ICP备 15555555号-2 浙公网安备 33333333333333号 杭州杭州杭州有限公司版权所有 </div>
</footer>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
background: #f1f1f1;
}
header {
width: 100%;
height: 400px;
overflow: hidden;
background-image: url(../img/header.jpg);
background-size: cover;
}
/*导航*/
nav {
height: 50px;
background: #8D398F;
margin: 3px auto;
}
nav li {
list-style: none;
margin: 0 40px;
}
nav li ul {
width: 110px;
float: left;
}
nav li ul:last-child {
float: right;
}
nav li ul a {
display: block;
text-decoration: none;
font-size: 21px;
color: #f1f1f1;
text-align: center;
line-height: 50px;
}
nav li ul a:hover {
color: #8D398F;
background-color: #f1f1f1;
}
/*正文两列*/
.contain{
display: flex;
margin: 10px;
}
.left, .right {
float: left;
margin:0 10px;
}
.right h3, .left h3{
padding: 10px 0;
}
.left {
width: 80%;
padding-top: 30px;
}
.right {
width: 20%;
}
.leftContain, .rightContain {
margin:10px 10px;
background: #fff;
padding: 20px;
}
.right ul {
list-style: none;
}
.labelName a, .article a, .left h3 a{
padding: 5px 0;
display: block;
font-size: 18px;
text-decoration: none;
color: #8D398F;
}
.labelName a:hover, .article a:hover, .left h3 a:hover{
text-decoration: underline;
}
/*footer*/
footer{
margin: 30px 0 0 0;
background: rgb(93, 36, 94);
}
.sitLink{
padding: 20px 0;
width: 100%;
}
.sitLink ul {
text-align: center;
padding: 20px;
list-style: none;
}
.sitLink ul li{
display:inline-block;
width: 100px;
}
.sitLink ul li a{
display: block;
font-size: 14px;
text-decoration: none;
text-align: center;
color: rgb(235, 235, 235);
}
.sitLink ul li a:hover{
text-decoration: underline;
}
#copyright {
color: rgb(172, 172, 172);
text-align: center;
font-size: 13px;
padding-bottom: 20px;
}
/*中间两列自适应*/
@media screen and (max-width:1200px) {
.contain{
flex-wrap:wrap;
}
.left, .right{
width:100%;
padding: 0;
}
}
结果：
css-博客样式初体验的更多相关文章
- 博客之初体验-----python初了解
---恢复内容开始--- 1.python2.x与python3.x的区别 (1) 2.x的默认编码是ASSIC码,不支持中文 (2) 3.x的默认编码是UNICODE,支持中文 (3) 2.x版本与 ...
- python 小爬虫爬取博客文章初体验
最近学习 python 走火入魔,趁着热情继续初级体验一下下爬虫,以前用 java也写过,这里还是最初级的爬取html,都没有用html解析器,正则等...而且一直在循环效率肯定### 很低下 imp ...
- twobin博客样式—“蓝白之风”
自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有了阅读疲劳:而一个设计粗劣嘈杂的网页实在 ...
- twobin博客样式
twobin博客样式—“蓝白之风” 自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有 ...
- Vno博客样式分享
不知不觉有一年多没有更新博客了,还是几位园友因为喜欢这套博客样式发了消息,否则我都快忘记自己还有一个博客了,哈哈. 言归正传,这套博客样式是当时闲来无事copy的iOS界喵神的博客Vno,确实很漂亮, ...
- 【转】CnBlogs自定义博客样式
文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...
- 自定义CSS博客（转）
摘自:http://www.cnblogs.com/libaoheng/archive/2012/03/19/2406836.html 前 言 一个好的阅读体验,对技术博客来说,也许算是锦上添花.入 ...
- CnBlogs自定义博客样式
弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...
- 技术博客（初用markdown）。
技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容 输出不同的三位数 以下为代码和输出结果 *** #include<stdio.h> ...
随机推荐
- 【PHP+nginx+php-fpm】探讨它们的运行机制和原理
1.PHP+nginx+php-fpm的运行机制和原理 Nginx 是非阻塞IO & IO复用模型,通过操作系统提供的类似 epoll 的功能,可以在一个线程里处理多个客户端的请求.(非阻塞, ...
- mapdb的适用场景介绍
对于大部分系统来说,mapdb并无太大价值,而且增加了成本.但是如果一级缓存巨大例如数以十GB级别,或占据了整个JVM的1/2以上,mapdb的价值就会体现出来.正如其官网介绍: MapDB prov ...
- 【4opencv】为基于OpenCV的图像处理程序编写界面—关于QT\MFC\CSharp的选择以及GOCW的介绍
基于OpenCV编写图像处理项目,除了算法以外,比较重要一个问题就是界面设计问题.对于c++语系的程序员来说,一般来说有QT/MFC两种考虑.QT的确功能强大,特别是QML编写andr ...
- ABAP基础篇2 数据类型
基本数据类型列表: 1.长度可变的内置类型(String.XString)1)string类型 在ABAP程序中,string类型是长度无限的字符型字段,可以和CHAR ,D,T ,I,N (F和P未 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之：区分页面是自跳转页面还是分享页面
背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...
- fidder配置 https设置 手机客户端
1.APP抓包时的手机代理设置: 让手机和PC在同一个局域网下面: 1.如果PC是笔记本,让iOS或Android手机.iPhone或笔记本它们连接同一个wifi网络即可(自己试了不行,未找到原因). ...
- git中配置的.gitignore不生效的解决办法
通常我们希望放进仓库的代码保持纯净,即不要包含项目开发工具生成的文件,或者项目编译后的临时文件.但是,当我们使用git status查看工作区状态的时候,总会提示一些文件未被track.于是,我们想让 ...
- oracle数据恢复
比较简单的操作,如有更好的方法欢迎补充 一.查询到某个时间点删除的数据select * from table_name as of timestamp to_timestamp('2019-11-13 ...
- Ubuntu16.04 安装PHP7 的 imagick 扩展
转自:https://blog.csdn.net/qq_16885135/article/details/78130281 1.从 https://pecl.php.net/package/imagi ...
- Linux下signal信号汇总
SIGHUP /* Hangup (POSIX). */ 终止进程 终端线路挂断 SIGINT /* Interrupt (ANSI). */ 终止进程 中断进程 Ctrl+C SIGQUIT /* ...