分享好友 前端技术首页 频道列表

前端——html+css类博客园页面搭建流程及实现

html教程  2023-03-08 19:550

要实现下面效果的一个页面搭建

前端——html+css类博客园页面搭建流程及实现 

1.html分块

将页面分为大体分为左右两个部分

<body>
    <div class="blog-left">
    </div>
    <div class="blog-right">
    </div>
</body>

2.左边在具体分块

    <div class="blog-left">
        <div class="blog-avatar">
        </div>
        <div class="blog-title">
        </div>
        <div class="blog-info">
        </div>
        <div class="blog-link">
        </div>
        <div class="blog-tag">
        </div>
    </div>

3.将每个块的内容写上

<div class="blog-avatar">
            <img src="头像.png" alt="">
        </div>
<div class="blog-title">
            <p>一个土味老父亲</p>
        </div>
 <div class="blog-info">
            <p>别爱我 没结果 除非花手摇过我</p>
        </div>
 <div class="blog-link">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">微信公众号</a></li>
            </ul>
        </div>
<div class="blog-tag">
            <ul>
                <li><a href="">土味情话</a></li>
                <li><a href="">摇花手教程</a></li>
            </ul>
        </div>

 

4.右边再具体分块

    <div class="blog-right">
        <div  class="article">
            <div class="article-title">
            </div>
            <div class="article-body">
            </div>
            <div class="article-bottom">
            </div>
        </div>
    </div>

5.文章标签具体设置

<div  class="article">
            <div class="article-title">
                <span class="title">都9102年了，还不做一个精神小伙？</span>
                <span class="date">2019/2/14</span>
            </div>
            <div class="article-body">
                <p>土味老父亲手把手教你摇花手</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>摇花手教程&nbsp;&nbsp;</span>
                <span>精神小伙</span>
            </div>
        </div>

写完html后的效果

前端——html+css类博客园页面搭建流程及实现

 

 

 

二.css部分

1.在html中导入css文件

<link rel="stylesheet" href="blog.css">

 

2.通用样式

body {
    margin: 0;
    background-color: #eeeeee;
}
a {
    text-decoration: none;
}
ul {
    list-style-type: none;
    padding-left: 0;
}

 

3.左侧样式

.blog-left {
    float: left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color: #042c4e;
}

.blog-avatar {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px solid white;
    margin: 20px auto;
    overflow: hidden;
}
.blog-avatar img {
    max-width: 100%;
}

.blog-title,.blog-info {
    color: darkgray;
    font-size: 18px;
    text-align: center;
}

.blog-link,.blog-tag {
    font-size: 24px;
}

.blog-link a,.blog-tag a {
    color: darkgray;
}

.blog-link a:hover,.blog-tag a:hover {
    color: white;
}

.blog-link ul,.blog-tag ul {
    text-align: center;
    margin-top: 100px;
}

 

4.右侧样式

.blog-right {
    float: right;
    width: 80%;
    height: 1000px;
}

.article {
    background-color: white;
    margin: 20px 40px 10px 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.title {
    font-size: 36px;
}
.date {
    float: right;
    margin: 20px 20px;
    font-weight: bolder;
}
.article-title {
    border-left: 8px solid #4cff22;
    text-indent: 16px;
}

.article-body {
    font-size: 18px;
    text-indent: 30px;
    border-bottom: 1px solid black;
}

.article-bottom {
    padding-left: 30px;
    padding-bottom: 10px;
}

 加上css样式以后就可以实现最开头的网站的样式了

ps：搜土味情话搜的我都快吐了

查看更多关于【html教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
HTML中将背景颜色渐变 html设置背景颜色渐变
通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡，由于用到css3所以需要考虑下浏览器兼容问题，例如：从左到右的线性渐变，且带有透明度的样式：#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*

0评论2023-03-08625

html5 Canvas 如何自适应屏幕大小
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {

0评论2023-03-08811

HTML的video标签，不能下载视频代码
!-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&

0评论2023-03-08596

HTML特殊字符、列表、表格总结 html特殊符号对照表
　　　　　　　　HTML实体字符　　在HTML中一些特殊的字符需要用特殊的方式才能显示出来，比如小于号、版权等，　　在课堂上老师教了我们一个有点意思的：空格，在教材上字符实体是“nbsp”通过老师　　的演示我们发现不同的浏览器他所显示的效果不同，有的比

0评论2023-03-08521

【JavaScript】使用document.write输出覆盖HTML问题
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据，这部分数据正在被导出、传输或显示，所以称为“流”。通俗的来说就是HTML文档的加载过程，如果遇到document.writ

0评论2023-03-08815

ASP.Net MVC 控制@Html.DisplayFor日期显示格式
在做一個舊表的查詢頁時，遇到一個問題：字段在db里存儲的是DATETIME，但保存的值只有日期，沒有時間數據，比如2018/2/26 0:00:00，顯示出來比較難看，當然也可以做一個ViewModel，在字段上添加Attribute定義來更改名稱和顯示名稱，如下：[Display(Name = "建

0评论2023-03-08716

html 基础代码
title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str

0评论2023-03-08466

HTML-js 压缩上传的图片方法（默认上传的是file文件）
//压缩图片方法function compressImg(file,callback){var src;var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);var read = new FileReader();read.readAsDataURL(file);read.onload = function (e) {var img = new Image(); img.src

0评论2023-03-08909

html中使table设置固定宽度的列不改变
在开发中发现，有时设置table列的宽度，但是当页面的宽度变时，列宽还是会变，解决方法就是设置table的table-layout属性，设置成table-layout="fixed"就可以了，关于它的其他值，大家可以查查

0评论2023-03-08732

HTML Table 拼凑表格数据并支持滚动条
1 !DOCTYPE html 2 html xmlns="http://www.w3.org/1999/xhtml" 3 head 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 5 title/title 6 /head 7 body 8 div style="width:600px; height:60px; overflow:scroll;

0评论2023-03-08728

html5 中meta中 content=width=device-width注意
!DOCTYPE html        html        head        meta http-equiv="content-type" content="text/html; charset=UTF-8"        meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"        sty

0评论2023-03-08540

HTML a标签 target属性作用
特殊的目标有 4 个保留的目标名称用作特殊的文档重定向操作：_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。_self这个目标的值对所有没有指定目标的 a 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多

0评论2023-03-08328

HTML5] html和css的使用方法以及样式
第一步： 清除默认样式第二步： 划分模块第三步： 设置模块的大小以及位置第四步： 划分下一级模块html和css引入网页头像link rel="shortcut icon" href="img/...ico"css样式表的引入方式css样式表的引入方式1、外链式link href="" rel="stylesheet"2、嵌入式

0评论2023-03-08936

转载：原文http://www.cnblogs.com/gao241/p/3522143.html
shell实例手册0说明{手册制作: 雪松更新日期: 2013-12-06欢迎系统运维加入Q群: 198173206请使用"notepad++"打开此文档,"alt+0"将函数折叠后方便查阅请勿删除信息，转载请说明出处，抵制不道德行为。错误在所难免，还望指正！# shell实例手册最新下载地址:http

0评论2023-03-08722

HTML里link meta全部标签的作用
做网站建设的时候很少用到太多的标签，但是在网站运营的时候，特别是像移动互联网发展、做SEO之后我们就特别容易看到很多不常见的link标签。那么这些标签都有什么作用呢？E维科技今天来为您整理一下，欢迎其他技术大牛共同分享。HTML里link 和 meta 标签详解m

0评论2023-03-08413

MVC 自定义标签,给Html.ActionLink加上支持图片链接的功能
转载：http://blog.csdn.net/niewq/article/details/17537873Html.ActionLink只支持文字链接，现在我们利用C#的扩展方法写一个Html.ActionLinkWithImage()让其支持图片链接的功能。一、首先新建一个静态类，将命名空间在改在System.Web.Mvc下，代码如下 usin

0评论2023-03-08587

更多推荐