网页制作基础知识

已于 2023-04-07 14:56:53 修改
阅读量1.1k 收藏 5
点赞数
分类专栏： 前端 文章标签： html css
于 2022-06-01 21:07:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66306407/article/details/125090272
版权

1.引用外部样式表（需要创建一个CSS）

2.内联、内嵌样式表

3.字体属性

4.列表标签（有序、无序）

5.div标签（float是浮动设置，clear是清除浮动）

个人博客：

首先要有一个框架：

 代码在此...

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简约-博客</title>
<link rel="stylesheet" type="text/css" href="简约-博客.css">
</head>

<body bgcolor="#ACB0D2">
<div id="header"><div id="title_name">个人博客</div></div>
<div id="nav">
<div id="sousuo"><input type="text" value="输入要搜索的内容..." maxlength="10"></div>
<div id="sousuo_img"></div>
<ul>
  <li><a href="#">文章</a></li>
  <li><a href="#">动态</a></li>
  <li><a href="#">讨论</a></li>
</ul>
</div>

<div id="main">
<div id="aside">
<div class="aside1">日志类型</div>
<div class="aside2">
<ul>
  <li><a href="#">经验小结</a></li>
  <li><a href="#">问题探讨</a></li>
  <li><a href="#">日常所想</a></li>
</ul>
</div>
<div class="aside1">最新日志</div>
<div class="aside2">
<ul>
  <li><a href="#">把酒言欢  言无不尽</a></li>
  <li><a href="#">算法实现</a></li>
  <li><a href="#">十大经典排序</a></li>
</ul>
</div>
<div class="aside1">最新评论</div>
<div class="aside2">
<ul>
  <li><a href="#">真好，把问题解决了！</a></li>
  <li><a href="#">博主你太强了，文理天才！</a></li>
  <li><a href="#">博主，干货满满！</a></li>
</ul>
</div>
<div class="aside1">博客统计</div>
<div class="aside2">
<ul>
  <li><a href="#">访问数：1068</a></li>
  <li><a href="#">日志数：25</a></li>
  <li><a href="#">回复数：35</a></li>
</ul>
</div>
</div>

<div id="content">
<div id="con_img"></div>
<div class="cont">
<div class="a1">把酒言欢  言无不尽</div>
<div class="a2">作者：蹦.沙卡拉卡  时间：2017-3-20</div>
<div class="a3">一段路走了很久，依然看不到方向；一些事想了很久，还是觉得纠结困惑。
人生有千万种可能，其实无论选择哪一种，都是最好的安排。
最重要的是，你得敢于做出选择，并向着更好的自己努力靠近。
每一个从容淡定的今天，都是昨天苦苦担忧的未来。
大胆去改变，加油！</div>
<div class="a4">阅读全文（4）  回复（0）</div>
</div>
<div class="cont">
<div class="a1">把酒言欢  言无不尽</div>
<div class="a2">作者：蹦.沙卡拉卡  时间：2017-3-20</div>
<div class="a3">一段路走了很久，依然看不到方向；一些事想了很久，还是觉得纠结困惑。
人生有千万种可能，其实无论选择哪一种，都是最好的安排。
最重要的是，你得敢于做出选择，并向着更好的自己努力靠近。
每一个从容淡定的今天，都是昨天苦苦担忧的未来。
大胆去改变，加油！</div>
<div class="a4">阅读全文（4）  回复（0）</div>
</div>

</div>
</div>

<div id="footer">@歪歪滴艾斯</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
a:visited {
	color: #FF6;
	text-decoration: none;
}
a:active {
	color: #9F6;
	text-decoration: none;
}
a:link {
	color: #0C6;
	text-decoration: none;
}
a:hover {
	color: #69F;
	text-decoration: underline;
}
*{
	margin:0;
	padding:0;
	list-style-type:none;}
body{
	margin-top:5px;}
#header{
	width:1000px;
	height:100px;
	border-top:#000 solid 3px;
	background:url(images/%E7%AE%80%E7%BA%A6-1.jpg);
	margin:0 auto;}
#title_name{
	margin:20px auto;
	text-align:center;
	letter-spacing:8px;
	font-size:20px;
	font-family:"微软雅黑";
	font-weight:bolder;}
#nav{
	width:1000px;
	height:30px;
	margin:0 auto;
	background:url(images/%E7%AE%80%E7%BA%A6-2.jpg);}
#sousuo{
	float:left;
	margin-left:38px;
	margin-top:2px;}
input{
	background:rgba(255,255,255,0.3);
	height:23px;
	color:#63C;}
#sousuo_img{
	float:left;
	width:30px;
	height:28px;
	margin-left:2px;
	margin-top:1px;
	background:url(images/%E7%AE%80%E7%BA%A6-2.png);}
#nav ul{
	margin-left:780px;}
#nav ul li{
	float:left;
	margin:5px 10px;}
#main{
	width:1000px;
	height:520px;
	margin:0 auto;
	border-bottom:#FC9 double 5px;}
#aside{
	width:249px;
	float:left;
	border-left:#000 solid 1px;}
#content{
	width:700px;
	height:500px;
	float:right;
	margin:10px 25px;
	background:#CCCCFF;
	}
.aside1{
	height:25px;
	text-align:center;
	color:#FFF;
	padding-top:4px;
	font-size:16px;
	font-weight:bolder;
	border-top:#FFF solid 3px;
	background:#FC9;
	letter-spacing:5px;}
.aside2{
	height:70px;
	background:#CFABED;
	padding-left:20px;
	letter-spacing:2px;}
#con_img{
	width:40px;
	height:40px;
	margin:10px 0px 10px 15px;
	background:url(images/%E7%AE%80%E7%BA%A6-1.png);}
.cont{
	margin:25px 30px;}
.a1{
	font-weight:bolder;
	font-family:"楷体";
	font-size:20px;
	height:30px;
	border-bottom:#999 dotted 1px;}
.a2{
	font-size:11px;
	color:#999;}
.a3{
	font-family:"宋体";
	font-size:18px;
	margin-top:10px;
	margin-bottom:10px;
	text-indent:2em;}
.a4{
	font-family:"新宋体";
	font-size:13px;
	color:#999;
	border-bottom:#999 solid 1px;}
#footer{
	clear:both;
	text-align:center;
	font-style:italic;
	font-family:"隶书";
	font-size:16px;}

行走中的CPU
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页基础认知
zhujianghan的博客
07-22 95
网页基础认知基础概念铺垫认识网页五大浏览器和渲染引擎web标准HTML初体验概念基本骨架语法规范 基础概念铺垫 认识网页 网页的组成部分 文字，图片，音频，视频，超链接 网页背后的本质 代码 什么软件将代码转为网页 浏览器转化（解析和渲染）成用户看到的页面 五大浏览器和渲染引擎 浏览器：网页显示，运行的平台 五大浏览器：IE,Firefox,Chrome,Safer,Opera 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析和渲染的部分。 web标准 让不同的浏览器按照相同的标准显示代码，让展示
网页开发基础
qq_55701820的博客
11-20 379
网页开发基础 文章目录 网页开发基础 学习目标 一、网页开发基础是什么？ 二、HTML：（超文本标记语言） 三、CSS技术 一、网页开发基础是什么？ 分类：网页技术可以粗略的划分为前台浏览器端技术和后台服务器端技术。早期只需使用HTML即可单独完成前台网页制作，而今天则需要学习整个Web标准体系才能完成规范的前台网页制作。在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript则负责动态行为。 动态网页：指网页的内容可以根据条件的改变而自动改变。动态网页通常情况下都是数据驱
广东省计算机二级考试《网页制作基础》样题、大纲
03-23
广东省计算机二级考试《网页制作基础》样题、大纲
一个简单的HTML网页 、个人主页网页设计(HTML+CSS)
最新发布
网页设计与制作 | HTML+CSS+JS
06-04 848
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
网页设计知识点总结
2401_84217187的博客
04-10 1075
master主要样式，base基本样式，module模块样式，layout版面样式，themes主题，columns专栏，font文字，forms表单，print打印。css优先级（权重相同，就近原则；重复径向渐变background-image：repeating-radial-gradient（渐变形状圆心位置，颜色值1，颜色值2，...，颜色值n）重复线性渐变background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2，...，颜色值n）
网页制作基础知识笔记
honev.blog.csdn.net
02-15 759
1.margin垂直方向合并：盒子在水平方向的外边距会合并，合并后的效果是，两个盒子的垂直距离为外边距大的那一个。inline特点：宽度允许条件下，所有inline元素在一行上显示，不单独占行，其width、height不可设置，width其实就是它包含的文字或图片的宽度，不可改变。（有空格的字体名称需用引号，无空格的不需要引号，字体选用按照先后排序，用逗号分开，如上述代码，GB是首选，没有则选YaHei，也没有就选sans）(x为水平方向上的缩放倍数，y为垂直方向的缩放倍数，xy取值在0~1时为缩小；
网页制作知识点归纳
Learning
05-02 1万+
一、HTML 1、HTML简介 HTML全称Hyper Text Markup Language，它不是一款编程语言，而是属于标记语言的一种，用于描述超文本中内容的显示方式，但必须通过浏览器的解释和翻译才能正确显示所标记的内容。 HTML元素包括：标题、段落、列表、表格及各种嵌入对象。其基本结构如下： <!doctype html> <html>...
HTML网页设计基础知识学习专题培训课件.ppt
11-20
"HTML网页设计基础知识学习专题培训课件" 本资源摘要信息是关于HTML网页设计基础知识学习的专题培训课件，旨在为学习者提供基础知识和实践操作指导。该课件涵盖了HTML网页设计的基本概念、标记的构成、标记的表示...
FrontPage教程:网页制作基础知识
09-22
网页制作基础知识是构建互联网内容的重要一环，尤其是对于想要创建个人主页或从事网站设计的人来说。在本文中，我们将深入探讨网页及其组成，并介绍常用的网页制作工具，特别关注Microsoft的FrontPage2000。 首先，...
网页设计基础知识.ppt
10-07
网页设计基础知识是指在设计和制作网页时所需掌握的基本概念和技术。以下是网页设计基础知识的相关知识点： 1. 网页和网站的概念 网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户...
响应式网页设计基础知识.pdf
12-23
响应式网页设计基础知识 响应式网页设计是指根据用户的设备和屏幕尺寸来调整网页的布局和样式，以提供最佳的用户体验。响应式网页设计的目标是使网页能够适应各种设备和屏幕尺寸，包括手机、平板电脑、桌面设备、...
网页设计基础知识.pptx
12-23
网页设计基础知识.pptx
网页设计基础内容总结（一）
m0_67859413的博客
09-10 1434
网页设计基础内容总结（一）大学笔记精华版
网页基础知识一文弄懂
LeHan的博客
05-13 2593
前言 用浏览器访问网站时，页面各不相同，你有没有想过它为何会呈现这个样子呢？这是一篇网页的基本组成、结构和节点等内容。 1.网页的组成 网页可以分为三大部分 ——HTML、CSS 和 JavaScript。如果把网页比作一个人的话，HTML 相当于骨架，JavaScript 相当于肌肉，CSS 相当于皮肤，三者结合起来才能形成一个完善的网页。下面我们分别来介绍一下这三部分的功能。 （1）HTML HTML 是用来描述网页的一种语言，其全称叫作 Hyper Text Markup Language，即超文本标
计算机等级考试二级Ｗeb大纲以及知识点整理 ——“逢考必看”
m0_73492876的博客
03-11 2757
计算机二级Web考试大纲知识点整理汇总
网页制作知识点整理
weixin_45926574的博客
09-25 237
1.所有的这些控件都在 这个id为“form1” name为“form1”的表单(form)中 这个表单提交数据的方式 method 是 “post” （提交数据一般有“get”和“post”） action 提交的地址 为“” 就是将这些数据提交给谁来处理 来自 https://zhidao.baidu.com/question/623492718134032404.html 1.属性值 input type=“” 值 描述 button 定义可点击的按钮（大多与 JavaScript
如何使用html制作网页
热门推荐
2301_76469377的博客
07-10 2万+
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容 ，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。<p>HTML称为超文本标记语言，是一种标识性的语言。
简单的网页制作
qq_63713157的博客
03-14 924
type，指定输入框的类型，text单行文本，password密码，submit提交按钮，reset，重置按键，button按键，普通的按键需要和特定的时间关联。hidden:隐藏字段，该内容不显示在页面上，提交其他的一些变量。name：名称，输入内容识别名称，传递参数时候的参数名称。13，input元素，（输入框）他是表单的一个字属性。value： 默认值，输入框默认填入的内容，th,是tr的属性，列标题，自动居中，加粗。指定表单中的内容项，比如输入内容的文本框。可以指定表单属性，也可以放在表单的外面。
网页设计基础知识概述
常用网页设计技术-网页设计与制作基础知识 网页设计是当代互联网技术中最重要的组成部分之一，掌握网页设计技术是每个IT从业者必备的技能。本文将对网页设计的基础知识和常用技术进行详细的介绍。 HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值