当前位置: 萬仟网 > IT编程>网页制作>CSS > css-博客样式初体验

css-博客样式初体验

2019年05月14日 07:38  | 萬仟网IT编程  | 我要评论

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

 

结果:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • VueRouter认识

    1、 什么是路由? 注意:作为vue的插件,需要单独引入js文件,且必须在vue.js之后引入。 <router-link to=“跳转路径”... [阅读全文]
  • 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些... [阅读全文]
  • Web基础--HTML、Css

    Web基础--HTML、Css

    一、Web项目(可跳过,直接从下一个标题开始) 1、Web项目: 指的是带网页的项目,通过浏览器可以访问的项目。比如:淘宝、天猫等。 2、Web项目... [阅读全文]
  • CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标... [阅读全文]
  • vue初级使用

    一、Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vu... [阅读全文]
  • HTML连载21-序选择器上

    HTML连载21-序选择器上

    解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 1.选中同... [阅读全文]
  • 哪些技术会决定前端开发者的未来发展?

    哪些技术会决定前端开发者的未来发展?

    2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。 我一... [阅读全文]
  • 关于阿里 iconfont 的使用步骤

    关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,... [阅读全文]
  • flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看... [阅读全文]
  • web前端布局HTML+CSS

    web前端布局HTML+CSS

    1、W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Pr... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com