2021-05-07

最新推荐文章于 2024-08-07 21:02:54 发布

金克丝的鱼骨头和砰砰枪

最新推荐文章于 2024-08-07 21:02:54 发布

阅读量47

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_57994770/article/details/116504542

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文记录了一位初学者使用HTML和CSS创建博客的过程，包括文件夹结构规划、CSS样式设置、页面布局设计等关键步骤。博客布局包括版心设定、导航栏、头部、横幅、列表与边栏的构建。此外，还提到了尖角效果的制作技巧，以及一些公共样式的应用。

摘要由CSDN通过智能技术生成

博客制作过程

在经过html和css学习后，今天开始做第一个博客小项目。初学者建议先从把整体架子搭出来，再去做里面的小细节。从建立文件夹开始吧。
1:建立一个blog文件夹，在里面建立images与css子文件夹，再创建index.html网页。（不要用中文命名）
（images文件专用于放网站里的各种图片.css文件放公共样式与私有样式）。
2：.css文件里创建 normalize.css，common.css与index.css文件。
3：在head里链接上三个个文件

顺序如下：

可以去掉顶部语言选项。
4:先添加公共样式，（如果记不住就去淘宝首页查看源代码，复制公共样式即可）目前使用的如下，后续要使用其他的继续添加

body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p,form,table{margin:0;padding:0;}
ul,ol{list-style:none;}

img{vertical-align:bottom;}

a{
	text-decoration: none;
}

.container{
    width: 1200px;
    margin: 0 auto;

版心基本都是1200px

<还有一些属性用到了再添加>

5:思考一下整体布局整理一下思路。
（1）主体内容都在版心内，可以量出宽度后添加公共样式 containar的margin:0 auto;这样不管屏幕分辨率如何，内容都会在中间显示。
（2）顶部设置一个顶部导航为topnavYI一个大盒子包一个小盒子，里面是几个a标签，一个左浮动，一个又浮动，这里设置固定高度就可以清除浮动了。
（3）下面是一个头部导航加一个搜索框，同样是一个大盒子包一个小盒子，左边是logo图片左浮动,中间是导航栏左浮动，右边是搜索框，右浮动，这里也可以在header里设置固定高度清除浮动,搜索框用子绝父相定过去
（4）下面是一个横幅，直接设置width=1200px;height=185px;添加背景图片，里面的内容用子绝父相顶或者用内边距都可以实现。
（5）横幅下则是一系列列表与边栏aside，各设置不同宽度。
（6）主题下是友情链接也是在版心内，可以添加containar
（7）最后则是尾部footer。
大致框架就是这样

特别注意：

最新留言里面有一个尖角效果可以用一个空白盒子来制作，给一个空盒子设置四条比较粗的边框线，再用transparent 半透明效果让三条边看不见，留下需要的那个边。


<!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>Document</title>
    <style>
        .box{
            width: 0px;
            height: 0px;
            margin: 50px auto;
            border: 10px solid #f0f;
            /*
             border-top-color:#f00;
             border-right-color:#f00;
             border-bottom-color#0a0;
             border
              */
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            
        }
        </style>
</head>
<body> 
    <div class="box"></div>
    
</body>
</html>

金克丝的鱼骨头和砰砰枪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-05-07

博客制作过程在经过html和css学习后，今天开始做第一个博客小项目。初学者建议先从把整体架子搭出来，再去做里面的小细节。从建立文件夹开始吧。1:建立一个blog文件夹，在里面建立images与css子文件夹，再创建index.html网页。（不要用中文命名）（images文件专用于放网站里的各种图片.css文件放公共样式与私有样式）。2：.css文件里创建 normalize.css，common.css与index.css文件。3：在head里链接上三个个文件顺序如下：<lin
复制链接

扫一扫