《博客页面制作》教程

最新推荐文章于 2024-03-15 09:56:34 发布
VIP文章 最新推荐文章于 2024-03-15 09:56:34 发布
阅读量2.6k 收藏 10
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baomg_82917/article/details/111686832
版权

《博客页面制作》教程

一、《博客页面制作》第一部分
  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>博客制作-第一部分</title>
		<style type="text/css">
			/*清除浏览器默认的边距*/
			*{
    
				margin: 0px;
				padding: 0px;
			}
			/*设置整个页面的背景颜色*/
			body{
    
				background-color: gainsboro;
			}
			/*设置第一部分div盒子的样式*/
			#one{
    
				background-image: url(img/head.png);
				padding-top: 20px;
				padding-bottom: 20px;
				margin: 10px;
				border-radius: 15px;
			}
			/*设置第一部分图片的样式*/
			#one img{
    
				width: 70px;
				border: 5px solid white;
				/*当圆角边框与图片大小一致时，就生成一个圆环*/
				border-radius: 70px;
				/*设置图片居中*/
				display: block;
				margin: 0px auto;
			}
			/*设置第一部分p标签的样式*/
			#one p{
    
				margin-top: 10px;
				text-align: center;
				font: bold 25px "微软雅黑";
				color: white;
			}
		</style>
	</head>
	<body>
		<!--第一部分-->
		<div id="one">
			<img src="img/avatar.png" />
			<p>W3Cschool小师妹</p>
		</div>
	</body>
</html>
二、《博客页面制作》第二部分
  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>博客制作-第二部分</title>
		<style type="text/css">
			*{
    
				margin: 0px;
				padding: 0px;
			}
			body{
    
				background-color: gainsboro;
			}
			/*设置第二部分盒子样式*/
			#two{
    
				background-color: white;
				margin: 10px;
				padding: 35px 10px 15px 10px;
				border-radius: 15px;
			}
			/*设置第二部分标题样式*/
			#two h1{
    
				font-size: 25px;
				text-align: center;
				color: #d9534f;
				margin-bottom: 15px;
			}
			/*设置第二部分段落样式*/
			#two p{
    
				font-size: 14px;
				line-height: 25px;
				font-family: "微软雅黑";
			}
			/*设置段落对齐方式*/
			.english{
    
				text-align: right;
			}
		</style>
	</head>
	<body>
		<!--第二部分-->
		<div id="two">
			<h1>关于我</h1>
			<p>
				嘿！我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站，并使用我的编程技术来获得更好的工作。我是在<strong>W3Cschool</strong>学到了所有这些，这让我也保持了对学习编程的积极性。加入我这个有益的学习旅程。沿途你会获得乐趣，得到帮助，学习更多知识！
			</p>
			<p class="english">
				"I love coding, I love W3Cschool!"
			</p>
		</div>
	</body>
</html>
三、《博客页面制作》第三部分
  • 效果图：
    在这里插入图片描述
  • 参考代码
最低0.47元/天 解锁文章
baomg_82917
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS网页制作布局实例教程
12-10
来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的...
常用的40个网站制作技巧
weixin_34292959的博客
05-23 69
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 &lt;table border oncontextmenu=return(false)&gt; &lt;td&gt;no &lt;/table&gt; 可用于Table 2.  &lt;body onselectstart="return false"&gt; 取消...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
简单又好看，找个个人博客页面学学我的老js!
最新发布
qqhxmdq的博客
03-15 325
虽然只有一个页面，但是，像什么标题，导航，侧边栏，快捷菜单，友链，搜索，列表，简介，预览页，就很全。我们可以先学，然后，再用我们的知识把它完美化，不知不觉就学会了这套技术。基本上有了个人博客所需要的很多基本功能，下一步只要花个一两小时学会它，然后开始加图片美化就完了。简直爽歪歪，虽然直接用肯定不行，但是拿来当一个学习材料，那还是相当的顺手。这可比直接下载那些美轮美奂的模板要好的多，看也看不懂，学也学不会。但是这样也有个问题，那就是，那些模板都，太！简单的一批，十几分钟就搞清楚每块该怎么弄了。
博客系统（页面设计）
Xian meng在努力呐-的博客
12-05 2238
1. 前端只是大致掌握，大致了解常用属性的使用 2. 基本能够看懂前端代码就行 3. 一行一行就使用弹性布局：`display:flex;` 4. 行内元素的限制 -> 转为块级元素 ：`display:block;` 5. 博客系统前端页面设计复盘！
HTML做一个个人博客页面（纯html代码）
qq_38515370的博客
04-05 965
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
如何制作HTML网页设计【体育运动主题网站——中国篮球NBA】
html精品源码
08-05 5218
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
【Bootstarp】个人博客网站设计作品分享（附源码）
有意栽花花不发，无心插柳柳成荫。
06-12 4815
【Bootstarp】个人博客网站设计作品分享（附源码）
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
博客制作流程——初学者
07-11
非常适合初学者的一篇教程，简单易懂，麻雀虽小、五脏俱全。
awayblog v1.0博客程序
03-17
awayblogv1.0使用说明 创作共用（CreativeCommons） ...awayblog是基于ASP+ACCESS平台的blog博客程序(UTF-8编码)，可全站生成html页面 awayblog作者：nowayer awayblog官方网站http://www.awayblog.cn
ignews:用Nextjs制作的博客
04-03
这是一个用引导的项目。... 交互式Next.js教程。 您可以查看-欢迎您提供反馈和意见！ 在Vercel上部署 部署Next.js应用程序的最简单方法是使用Next.js创建者提供的。 请查看我们的以获取更多详细信息。
【代码案例】博客页面设计（附完整源码）
Stella-F的博客
07-24 1万+
本篇文章主要利用前面学习的前端知识来构建出一个博客的网页页面。
我的博客网页设计
qq_44606245的博客
11-11 733
我的博客网页设计 css文档 body { width: 787px; height: 550px; border: 5px solid #CBCBCB; margin: 100px auto; } .title { height: 46px; width: 787px; font-size: 34px; text-align: center; color: #656467; font-weight: bold; mar
我的博客网站设计
modabobo
11-02 126
界面效果图 articallist editartical index photo photoupload rejiest writeartical 收获与总结 大三以来，九月份一周左右完成html大体学习，紧接着，两个周学了一下jquery.在十月份两个周学了一下jsp,再用一个周学了一下Jpa与spring。经过两三个月的不断学习，最后，写出了一...
博客系统页面设计
tgs2033的博客
03-06 3374
文章目录 HTML 博客列表页面（index.html） 博客正文页面(article.html) 博客登录页面(login.html) 博客编辑页面(editor.html) CSS common.css edit.css article.css index.css login.css JS 博客系统主要分为四个页面，具体网页展示和代码部分如下： 博客列表页面（index.html） 博客正文页面(article.html) 博客登录页面(login.html) 博客编辑页面(e
博客系统程序(页面设计)
zyx22334的博客
03-04 2637
另外,在这里查看全文按钮后面可以添加两个>>,但是在html中,>会被误认为是一个符号导致不去解读,所以这里要使用到转义字符:'' >将博客复制三份,此时就完成了:展现形式是:然后设置右半部分内容的背景颜色:然后是圆角矩形:此时就是要设置右半部分主要内容的样式了:但是右半部分不属于common样式,是右半部分的专属样式,为了区分方便,我们要当开一个文件来记录下右半部分内容的样式文件.展现形式是:这样我觉得就很好看了,不需要再进行更改了.
dreamweaver网页制作教程
07-09
当然可以！以下是一些基本的 Dreamweaver 网页制作教程的步骤： 1. 下载和安装 Dreamweaver：首先，你需要从 Adobe 官方网站下载并安装 Dreamweaver 软件。 2. 创建新项目：打开 Dreamweaver 后，点击 "新建" 或 "创建新项目" 选项。在弹出的对话框中，选择一个网页模板或选择空白页面。 3. 设计页面布局：使用 Dreamweaver 的可视化编辑器，你可以直接拖动和放置元素来设计页面布局。你可以添加标题、段落、图像、链接等元素。 4. 编辑页面内容：通过双击页面上的文本或其他元素，你可以进行编辑。使用 Dreamweaver 的工具栏和属性检查器来修改文字样式、颜色、大小等。 5. 插入图像：要插入图像，可以使用 Dreamweaver 的 "插入" 菜单，然后选择 "图像"。选择要插入的图像文件，并设置图像的属性，如大小、对齐方式等。 6. 添加链接：要创建链接到其他页面或外部资源的锚点，可以使用 Dreamweaver 的 "插入" 菜单，然后选择 "超链接"。输入链接的 URL 和相关信息。 7. 预览和测试：在设计和编辑过程中，你可以随时点击 "预览" 按钮来查看页面的实际效果。你还可以在不同的浏览器中测试页面的兼容性。 8. 保存和发布：完成页面的设计和编辑后，点击 "保存" 按钮将页面保存到本地计算机上的指定位置。然后，你可以将页面上传到 Web 服务器上，以便在互联网上访问。 请注意，这只是一个简单的 Dreamweaver 网页制作教程的概述。Dreamweaver 是一个功能强大且复杂的工具，你可以深入学习和探索其更多功能和特性来创建更复杂和专业的网页。希望这个简要教程对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值