html+css实战之仿博客网页

最新推荐文章于 2024-07-20 16:11:47 发布

ava_1234

最新推荐文章于 2024-07-20 16:11:47 发布

阅读量8k

点赞数 22

分类专栏： html+css 文章标签： html css实战

本文链接：https://blog.csdn.net/ava_1234/article/details/79101066

版权

本文记录了作者初次尝试使用HTML和CSS制作博客页面的过程，分享了实现的代码，并表示这作为学习笔记，未来将进行优化。

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

这几天学习了一些html+css的知识，于是就动手仿博客页面做了一个静态的页面。

下面为实现的代码：

blog.html:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>myBlog</title>
<link rel = "stylesheet" type = "text/css" href = "blog.css">
</head>
<body>
<div id  = "container"> 
<div id = "header">

<div id = "firstpic" >
<img  a href = "" src = "./images/csdn.jpg" alt = "" width="80" height="50" style="float:left"></a>
</div>
<div id = "menu">
<ul class = "title" >
<li><a  href = "#" >博客</a></li> 
<li><a  href = "#" >学院</a></li> 
<li><a  href = "#" >下载</a></li> 
<li><a  href = "#" >GitChat</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 = "#" style = "margin-right:150px">ITeye</a></li> 
</ul>
</div>
<div id = "secondpic" >
<img id = "search" src = "./images/search.jpg" alt = ""  height="40" width = "200" style="float:left" >
</div>
<div id = "other">
<ul class = "subtitle" >
<li><a  href = "#" style="margin-left:23px">写博客</a></li> 
<li><a  href = "#" style="margin-left:23px">发Chat</a></li> 
</ul>
</div>
<div id = "thirdpic">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
</div>
</div>

<div id = "main">
  
<h>我的博客</h>
<ul class = "mana">
<li><a  href = " " >修改个人资料</a></li> 
<li><a  href = " " >管理博客</a></li> 
</ul>

<div id = "lside&

最低0.47元/天解锁文章

ava_1234

关注

22
点赞
踩
144

收藏

觉得还不错? 一键收藏
9
评论
html+css实战之仿博客网页

这几天学习了一些html+css的知识，于是就动手仿博客页面做了一个静态的页面。下面为实现的代码：blog.html:myBlog 博客学院下载 GitChat 论坛问答商城头条活动码云 ITeye 写博客发Chat 我的博客修改个人资料管理博客只看
复制链接

扫一扫

专栏目录