HTML5网页基础设计——课程介绍专栏

已于 2022-03-26 10:15:14 修改
阅读量3.6k 收藏 41
点赞数 7
文章标签： html5 前端 html css3 网页设计
于 2022-02-07 11:05:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shengming_tutou/article/details/122805888
版权

案例：

 图片：

 参考代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动手实践</title>
<style>
	*{
		margin: 0;
		padding: 0;
		font-size:14px; 	
	}
	dd{
		width: 461px;
		height: 145px;
		margin: -4px;
		padding: 0;
		background: url("../素材/bg.png");	
	}
	.one,.three{
		padding-top:43px;
		width:120px;
		height:80px;
		display: inline-block;
		text-align: right;	
	}
	.two{
		color: white;
		padding-top:39px;
		width:90px;
		height:80px;
		display: inline-block;
		text-align: right;
	}
	a:hover{
	color: #ce4d52;
	background:url("../素材/bg1.png");
	}
	a{	
		color: white;
		display: block;
		width: 461px;
		height: 145px;
		text-decoration: none;
		
	}
	

	
	
	
	
</style>
</head>

<body>
	<dl>
	<dt><img src="../素材/head.png" width="457" height="95" alt=""/></dt>
		<dd><a href="">
			<span class="one">印刷流程<br>广告设计<br>企业形象设计</span>
			<span class="two">&nbsp;<br>1<br>&nbsp;</span>
			<span class="three"><br>&nbsp;平面设计<br>&nbsp;</span></a>
			</dd>
		<dd><a href="" >
			<span class="one">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
			<span class="two">&nbsp;<br>2<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>
		<dd><a href="" >
			<span class="one">视觉创意设计<br>人机交互原则<br>UI设计规范</span>
			<span class="two">&nbsp;<br>3<br>&nbsp;</span>
			<span class="three">&nbsp;<br>网页设计<br>&nbsp;</span></a>
			</dd>
	</dl>
</body>
</html>

无聊玩玩~
关注
  • 7
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
C语言基础——专栏索引篇
01-08
前言 ...第二课：指针与数组——————————————————————–《透过表象看本质->指针与数组的关系》 第三课：结构体的内存对齐———————————————————–《内存对齐模式
网页设计基础课程介绍
08-29
给学生上网页设计基础课程的资料第一次课的课件
课程介绍专栏/html5+css/案例演示
No1banana的博客
02-10 6574
实现效果 合给出的素材，运用列表标签、超链接标签以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接，当鼠标移上时，其样式会发生变化。 鼠标移动到对应位置上的效果 代码以及注释 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>课程介绍专栏</title> <style> *{ margin: 0;
《网页前端开发之HTML5》 -01课程简介、网页简史、HTML简介
weixin_52614514的博客
07-11 310
本文为b站视频《尚硅谷前端基础教程（含css3+html5）》课堂笔记整理，笔记以代码形式呈现，包含网页渲染后截图并整理成文字版本便于观看，包括课程简介、网页简史、HTML简介。
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
芝麻的博客
02-14 4903
编著的教材 HTML+CSS+JavaScript网页制作案例教程 第五章：“课程介绍”专栏-课后习题参考代码 题目原型： 请结合给出的素材，运用列表标记，超链接标记以及css控制列表与超链接的样式实现如下图的效果。
HTML5&CSS3基础：课程简介
斜键仙的博客
11-10 930
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 # 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言一、pa
学院课程介绍网页模板
01-22
学院课程介绍网页模板
网页设计作业.docx
02-02
•web网页设计实例作业 ——丝绸之路 (6页) 简单个人网页设计作业 静态HTML文化主题网页 •获取更多源码 •一、作品展示 •二、文件目录 •三、代码实现 •四、获取更多源码 •五、学习资料 •六、更多源码
Html课程代码（配合html专栏使用）
最新发布
03-14
主要配合html专栏课程，主要介绍html基础，css，以及布局，还有html5和css3，还有Flex布局，最后就是JavaScript脚本语言介绍以及JQuery的简单使用。
FPGA课程设计——数字电子时钟VERILOG（闹钟，校时可校时，可设闹钟，闹钟开关，led指示）
05-20
FPGA课程设计——数字电子时钟VERILOG（基于正点原子新起点开发板，支持8位或6位共阳极数码管显示时分秒毫秒，可校时，可设闹钟，闹钟开关，led指示） 本文是用verilog语言来描述一个基于FPGA的多功能数字电子时钟的...
网页制作代码+课程总结
05-24
网页制作代码+课程总结；旅游网站 CSS代码@charset "utf-8"; body { font-size: 12px; color: #666; text-align: center; margin: 0px; padding: 0px; } #container{ text-align:left; padding:0px; width:1400px; position:relative; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ padding-top:15px; height:90px; } #logo{ margin:0px; padding:0px; float:left; width:365px; text-align:right; } .pic{ vertical-align:middle; padding-right:20px; } #ss{ float:left; width:835px; text-align:right; height:35px; padding-top:0px; padding-right:200px; padding-bottom:0px; padding-left:0px; margin:0px; } #daohang{ margin-top:5px; margin-right:0px; margin-bottom:0px; margin-left:195px; float:left; text-align:right; padding:0px; height:38px; width:840px; } #daohang ul{ margin:0px; padding:0px; list-style:none; } #daohang ul li{ text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0px; padding-bottom:13px; padding-left:0px; } #daohang a:link,#daohang a:visited{ color:#FFF; text-decoration:none; } #daohang a:hover{ color:#333; text-decoration:underline; } #banner{ background-image:url(images/pic.jpg); background-repeat:no-repeat; height:160px; text-align:center; padding-top:400px; padding-right:0px; padding-bottom:0px; padding-left:0px; margin:0px; } #banner img{ padding:0px 5px 0px 5px;} .daohang { font-size: 16px; color: #09F; background-color: #060; text-align: center; display: block; } #footer{ color: #000; background-image: url(images/bj03.jpg); background-repeat: repeat-x; text-align: center; padding: 30px 0px 29px 0px; font-size: 16px; }
​web网页设计与制作期末作品期末考试项目
02-08
本人大学web网页设计与制作课程总成绩94.5。本项目制作占期末65%，预估获得满分，最多扣了三五分。 压缩包内涵实现该项目所有素材及完整代码，可直接使用！ （因上传资源不可加图片 详细效果点我头像 web专栏里发布...
大一作业，自我介绍，一共六个网页页面见专栏
11-12
大一作业，自我介绍，一共六个网页页面见专栏，css基础布局页面，新手自制
《创意网页设计模板集锦》-网页模板1
02-14
无论您是网页设计师还是对网页设计有兴趣，这个专栏将为您提供各种创意与实用兼具的网页设计模板。我们将分享最新的设计趋势、交互体验技巧和优秀的设计案例，帮助您提升网页设计技能，创造出引人注目的网页作品。...
大熊猫介绍专栏PPT课件
05-18
大熊猫介绍专栏，大熊猫介绍专栏课件，大熊猫介绍专栏PPT
课程介绍
小猿取经
12-25 226
1.1. 微信小程序基础 ​ 主要讲解微信小程序的基础使用以及相关概念知识 1.2.礼物说微信小程序 ​ 一个基于小程序的礼物说应用，加深对微信小程序基础知识的了解。 1.2.1.礼物说项目介绍 ​ 礼物说，新一代移动电商，主打礼物和全球好货指南，主要涵盖礼物、家居、服装、饰品、零食等类目。针对送礼物和挑选生活好物的痛点。礼物说采用“媒体+电商”的运营模式，提前为用户构建使用场景。礼物说认为，...
【网页设计】第 1 课 - 了解网页设计
深入挖掘，筑基为先；知其然，知其所以然。
06-11 1423
前段时间学习完了前端三剑客（HTML 、CSS、JavaScript），今天又跑来学习 UI 设计师层面的网页设计了，哎~~，这一天天的，啥都想学，，，
课程页面设计
weixin_30784945的博客
07-24 185
路由：router.js { path: '/course', name: 'course', component: Course }, 视图：Course.vue <template> <div class="course"> <Header></Header> <di...
课程简介、网页简史、HTML简介、编写第一个网页、自结束标签和注释、标签中的属性、文档声明、关于进制、字符编码、文档的使用——HTML
weixin_70320000的博客
12-11 237
课程简介、网页简史、HTML简介、编写第一个网页、自结束标签和注释、标签中的属性、文档声明、关于进制、字符编码、文档的使用
用html写一个新浪专栏网页
05-15
抱歉，作为AI，我无法展示HTML界面。但是，我可以提供一个简单的HTML代码示例，以帮助您开始编写自己的新浪专栏网页： ``` <!DOCTYPE html> <html> <head> <title>我的新浪专栏</title> </head> <body> <header> <h1>我的新浪专栏</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">最新文章</a></li> <li><a href="#">分类</a></li> <li><a href="#">关于我</a></li> </ul> </nav> </header> <main> <article> <header> <h2>文章标题</h2> <p>作者：xxx | 发布时间：xxxx-xx-xx</p> </header> <p>文章内容</p> </article> <article> <header> <h2>文章标题</h2> <p>作者：xxx | 发布时间：xxxx-xx-xx</p> </header> <p>文章内容</p> </article> <!-- 更多文章 --> </main> <footer> <p>版权所有 © 2021 我的新浪专栏</p> </footer> </body> </html> ``` 您可以根据自己的需求修改上述代码，并添加更多的文章和页面元素，以创建自己的新浪专栏网页。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值