第一次制作的网页（部分）html和css

最新推荐文章于 2024-07-24 20:11:59 发布
最新推荐文章于 2024-07-24 20:11:59 发布
阅读量187 收藏 2
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51516839/article/details/111008663
版权

第一次做的网页

css部分

body{/*可以在这里对网页整体背景进行调整*/
	/*background-image: url(../image/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-color: #cccccc;*/
	margin: 0;
}

*{
	box-sizing: border-box;
}
/*头部样式，对顶部图片背景，文字可进行编辑替换*/
.header{
	background-color: #f1f1f1;
	padding: 20px;
	text-align: left;
	background-image: url(../image/background.jpg);/*可对顶部背景图进行替换*/
}
.header h1{/*对顶部logo样式的定义*/
	padding: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
}

/*对导航条样式的定义*/
.topnav{
	overflow: hidden;
	background-color: #333;

}

/*导航链接部分的规格的定义*/
.topnav a{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/*链接颜色修改*//*主要是鼠标移动到导航栏链接位置时，链接部分的背景，文字颜色会进行变换*/
.topnav a:hover{
	background-color: #ddd;
	color: black;
}

/*创建两列*/
/*左侧栏*/
.leftcolumn{
	float: left;
	width: 75%;
}
/*右侧栏*/
.rightcolumn{
	float: left;
	width: 25%;
	background-color: #f1f1f1;
	padding-left: 20px;
}

/*左右栏中的## 标题图像部分*/
.fakeimg{
	background-color: white;
	width: 100%;
	padding: 0;
}

/*文章卡片效果*/
.card{
	background-color: white;
	padding: 20px;
	margin-top: 20px;
}
/*列后面清除浮动*/
.row:after{
	content: "";
	display: table;
	clear: both;
}

/*网页底部*/
.footer{
	padding: 20px;
	text-align: center;
	background:#ddd;
	margin-top: 0;
}

/*响应式布局   屏幕尺寸小于800px时，两列布局改为上下布局*/
@media screen and (max-width: 800px){
	.leftcolumn,.rightcolumn{
		width: 100%;
		padding: 0;
	}
}


/*响应式布局   屏幕尺寸小于400px时，导航,两列布局改为上下布局*/
@media screen and (max-width: 400px){
	.topnav a{
		float: none;
		width: 100%;
	}
}

HTML部分

首页HTML部分

<!DOCTYPE html>
<html>
<head>
	<title>首页名称</title>
	<link rel="stylesheet" type="text/css" href="../css/first.css">/*链接css*/
</head>
<body>
	<div class="header">/*头部内容*/
		<h1><img src="logo图片链接"></h1>
	</div>
	<div class="topnav">
		<a href="#">链接</a>
		<a href="#">链接</a>
		<a href="#" style="float: right">处在导航栏右侧的链接</a>
	</div>
	<div class="row">
		<div class="leftcolumn">/*左侧栏目内容*/
			<div class="card">
				<h2>文章名字</h2>
				<div class="fakeimg" style="height: 200px;"><a href="图片所指向的跳转位置的链接"><img src="要插入的图片的路径"></a></div>
				<p>文字注释</p>
			</div>
		</div>
		<div class="rightcolumn">/*右侧栏目内容*/
			<div class="card">
				<h2>关于我</h2>
				<div class="fakeimg" style="height: 100px;"><a href="文字跳转链接"><img src="图片位置"></a></div>
			</div>
			<div class="card">
				<h3>我的视频</h3>
				<div class="fakeimg"><a href="链接跳转"><img src="图片路径"></a></div><p>文字注释</p>
			</div>	
		</div>
	</div>
	<div class="footer">
	/*这里可以添加网页尾部的相关内容*/
	</div>
</body>
</html>

第一次所做，如有错误，欢迎讨论指正

啦啦啦～阿
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第十一次课程 网页制作之CSS2上课
05-14
本节课“第十一次课程：网页制作之CSS2上课”将深入探讨CSS的基本语法、在Dreamweaver（DW）中编写CSS的方法以及常见CSS属性的设置技巧。 首先，我们来了解CSS的基本语法。CSS语法由选择器和声明组成，选择器用于...
第一次做网页
北极星的博客
03-03 179
使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面（在其中的一个页面里面，开发一个用户注册界面）
haha_7的博客
10-29 472
1）使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。 2）在其中的一个页面里面，开发一个用户注册界面，要求：使用JavaScript检查格式是否正确。 a.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaWeb学习</title> <style> * { box-sizing: border-box;
作业一——第一次编写文本网页心得
qingzi_的博客
04-02 730
1.html的简单框架大概是    &lt;html&gt;             &lt;head&gt;             &lt;/head&gt;             &lt;body&gt;             &lt;/body&gt;    &lt;/html&gt;2.每个html里在head里都有（勿忘） &lt;meta charset="UTF-8&q
html占位图img placeholder
热门推荐
且行且看
11-14 1万+
html image placeholder while loading
html+css3基础知识部分详记
qq_41662017的博客
07-04 3218
1.VsCode操作 1）语言切换 2）“文件”——首选项——“设置” 3）插件：view in browser open in browser 4）快捷键 alt+b 使用默认浏览器打开 shift+alt+向下箭头 向下复制一行 shift+alt+向上箭头 向上复制一行 alt+向下箭头 向下移动行 alt+向上箭头 向上移动行 shift+tab 向前移动 ctrl+z 回退一步 2.浏览器及内核 1）chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 2）
动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip
05-25
在这个"动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip"压缩包中，你将找到一系列基于这些技术的超全案例，每个案例都是独立的HTML文件，便于学习和理解。 HTML5是超文本标记语言的最新版本，它引入了...
第十次课程 网页制作之CSS1上课
05-14
【网页制作之CSS1上课】课程是学习网页设计的关键步骤，主要聚焦于CSS（层叠样式表）的基础知识，这是构建美观、响应式网站的重要工具。以下是对这一课程内容的详细解析： 一、CSS基本语法 CSS允许我们将样式规则...
HTML5+CSS3网页设计-第六章 盒子模型.pptx
12-21
`border`属性可以简写，一次性设置所有边框的样式、宽度和颜色。 外边距`margin`用于设置元素周围的空间，可以单独设置`margin-top`、`margin-right`、`margin-bottom`和`margin-left`，或者使用简写形式。外边距的...
大学生影视网页设计作业 电源推荐网页制作 静态HTML网页制作注册登录表单 DIV CSS布局7页网页成品代码
12-21
在本项目中，大学生以影视为主题，利用HTML和CSS技术，设计并制作了一个包含七个页面的静态网页。这个网页设计作业旨在让学生掌握基础的网页布局和设计技能，使用的主要工具有Dreamweaver，这是一种常见的网页设计...
第一次动手制作网页
Newbee134的博客
05-26 177
初步建立一个自己的网站 首先关闭电脑防火墙 网站服务软件：XAMPP 更改端口(电脑会默认一个端口，例80，多台电脑同时那啥的话打不开网页，所以需要更改) XAMPP软件——Apache-Config——Apache（httpd.conf）——80改为8008 改完之后在浏览器输入http://192.168.1.20:8008 便会显示网页，但显示的是XAMPP的一些文字内容 在网页中添加自己想要加入的内容，找到documentroot所在位置 然后在C盘-XAMPP-htdocs 删掉htdocs文件
网络小白的第一次网页之旅———写了一点简单代码和服务器创建
苏凯祺的博客
04-09 419
之前一直想着的是做一个网页来玩，可是对着方面一无所知。只能去图书管接一点书来看，但是时代发展的太过于迅速了，都不知道该用啥了，百度了好久也没有确定的路线，就拿了图书馆里多种种类之中书本最多的一类语言来看。拿了Dreamweaver CS6来看看。（至于 Dreamweaver CS6的安装与破解就不用我再说了，相信网上有很多的教程去看，大部分都是可行的。）   然后兴致冲冲的去买一个服务器，之前
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3241
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
ASP.NET 生成分页 HTML 函数示例
一个九零后程序猿开发日志
07-24 209
函数会生成一个包含上一页、页码和下一页的 HTML 分页导航。
【HTML — 构建网络】HTML 入门
07-24 1148
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
如何在Html界面内实现类似ChatGpt的打字效果
ioioppk的博客
07-23 297
在你的代码中添加打字机效果，你可以创建一个函数来逐字展示内容。这个函数会将内容分解成单个字符，然后逐渐显示在页面上。
HTML 基础知识
07-24 986
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
IPython的HTML魔法：%%html_header命令全解析
最新发布
2401_85762266的博客
07-24 1143
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML(五）——HTML区块，布局
m0_62701594的博客
07-23 474
HTML可以通过 <div> 和 <span>将元素组合起来，可以来布局，就是盒子，div是块级盒子，里面 可以放任何东西，span里面装的是文本。
新手指南：掌握HTML、CSS、JavaScript与网页设计
"《学习网页设计：初学者指南》第四版是一本由Jennifer Niederst Robbins撰写的实用教程，专为想要踏入网页设计领域的初学者提供全面的入门教程。该书涵盖了HTML、CSS、JavaScript和Web图形设计的核心技术，帮助读者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值