自学web前端练手——CSS样式基础

最新推荐文章于 2022-09-27 20:40:22 发布
最新推荐文章于 2022-09-27 20:40:22 发布
阅读量1.9k 收藏 6
点赞数 3
分类专栏： 自学web前端 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvshaoshishang/article/details/104640251
版权
本文介绍了使用CSS进行网页布局的基本技巧，包括内嵌样式的应用，展示了如何创建一个包含表格、多行单元格的网页，并且在无序列表中嵌入10个超链接。通过实例，帮助读者掌握CSS在HTML5中的应用。
摘要由CSDN通过智能技术生成

CSS样式采用内嵌样式完成。

网站实现如下内容：

（1）包含1个网页。

（2）网页中要用到表格，

           a)  表格分成2行，第一行包含表头单元格
           b) 第二行包含普通单元格
           c）表格宽度300px

（3）表格第一行

          a)  有背景颜色#3cc

          b)  文本居中对齐

          c)  文字18个像素大小

          d）行高3字符

（4）表格第二行单元格

          a)  文字白色，背景黑色，字号12像素大小

          b）包含一个无序列表，无列表标号

（5）无序列表中是10个超链接

          a) 超链接无下划线 
          
          b）默认超链接文字白色

          c）鼠标悬停超链接背景颜色变白，文字颜色变黑

效果图如下：
在这里插入图片描述
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS样式单元作业</title>
	<style type="text/css">
        table{
   
        	width: 300px;
        }
        tr:nth-child(
最低0.47元/天 解锁文章
lvshaoshishang
关注
专栏目录
无序列表如何做一个导航条?html&,如何使用无序列表制作导航菜单.docx
weixin_29182481的博客
06-04 3687
第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： 首页产品介绍服务介绍技术支持立刻购买联系我们 CSS定义为：.test ul{list-s...
Dreamweaver -的简易网站实现
qq_46924416的博客
09-27 775
Dreamweaver -的简易网站实现 网站实现如下内容: (1)包含两个网页，内容跟音乐相关，具体内容自己设计。 (2)合理对网页进行排版。 (3)每个网页都有导航栏，导航栏可以水平也可以垂直排列，可以通过导航栏 在两个页 (4)网页有一级标题。 (5)网页有正文段落。 (6)网页上用到至少1个图片，美化页面。 要用到的知识点： 短语元素 列表（有序，无序，定义） 超链接 web中插入图片 1，短语元素 名称 所表示的意义 b 加粗：没有额外的重要性，但样式采用加粗字体 cite
前端css的练习
wyqwilliam的博客
12-06 170
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS的引入和申明</title> <!--第二种方式，使用style语句--> <style type="text/css"> #div06{ ba...
小米网站
m0_69167751的博客
09-27 530
解决：给li全部左浮顺序就对了,header统一写li,不要用wrap,因为wrap整个页面水平居中都要用它,下面也要用它,不要用它来写样式,一样的样式就统一写,不一样的就分开写。重点：无序列表左右各一块,左右这两块就不套div了,本来导航时用无序列表写,无序列表ul套li,li套a,ul也是块元素也是一个容器,左右套两个div肯定是没有问题的,重点：引入完成后html写结构,css写样式,由上往下(由左往右)进行写,布局是一层一层div从外到里去嵌套,pc端的项目小米不是响应式的,也不是移动端的,
前端 习题
欢迎光临雨落星辰的博客
05-30 1355
要求将网站放在文件夹之中，包括所有网页文件与用到的图片等文件， 压缩成.zip或者.rar文件上传。CSS样式采用内嵌样式完成。 网站实现如下内容（见附件图1，图2）： （1）包含1个网页。（1分） （2）网页中要用到表格， a) 表格分成2行，第一行包含表头单元格（1分） b) 第二行包含普通单元格（1分） c）表格宽度300px（1分） （3）表格第一行 a
自学web前端练手——简易版成绩统计页面（html+css+js）
lvshaoshishang的博客
03-27 3658
遇到的问题： ①刚开始innerHTML一直显示不出来，然后发现是犯了之前跟“js的随机验证码和验证”这篇博文一模一样的错误_(:з」∠)_ var number=f1.getElementsByTagName(‘input’); //获取到的时一组元素，number[i]时其中的一个文本框元素，它的值得通过value属性来获取， number[i].value才是某个文本框元素的值 ②表单提交后...
【自学前端】CSS样式基础
西门大盗 捉虫专家
05-07 90
一：样式位置： ## 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： ```html <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> ``` ...
自学web前端练手——js的九九乘法表
lvshaoshishang的博客
03-09 3601
利用js实现九九乘法表（其实就跟用C实现一样简单，不过就是加了表格边框而已）。 效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九九乘法表</title> <style type=...
前端入门经验——CSS样式（1）
qq_45997679的博客
08-07 142
1、block和inline-block 具体参考：block，inline和inline-block的区别 block：块级元素，通常会单独占一行 inline：前后不会换行。
自学web前端练手——HTML5的canvas实现网页画图（html5+css+js）
lvshaoshishang的博客
03-28 4080
html5的canvas实现网页画图步骤： ①定义画布（html5）②设置画布样式（CSS）③js准备绘图的上下文环境④js绘图 效果如下： 点击按钮可以改变画笔颜色和画笔粗细大小。随便画的_(:з」∠)_不要嫌弃我手抖 代码如下： .html <!DOCTYPE html> <html lang="en"> <head> <meta charset...
CSS样式基础
weixin_62853665的博客
04-04 277
CSS样式基础（刘锦程）
前端过程性考核，肝了一宿终于肝出来了!!!
秀岩的博客
05-12 1034
  第二天要交过程性考核，熬夜一宿肝出来了，有些样式细节还没有完善的，前端学的不是特别明白，不要拍砖????。 文章目录题目 1题目 2题目 3题目 4题目 5题目 6题目 7题目 8 题目 1 请编写 html 和 CSS,实现如下页面效果。图中数字为元素高度、宽度和元素间间距。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
WEB入门二 表格和表单
张晨光老师的播客
02-14 8941
学习内容Ø表格的作用和制作Ø表单的制作能力目标Ø掌握表格的创建Ø掌握设置表格的常用属性；Ø理解表单的作用Ø熟练掌握表单常用元素本章简介表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量
鼠标经过超链接上，元素(li)背景变色的代码
Mark的专栏
04-28 9792
鼠标经过超链接上，元素(li)背景变色的代码 效果如下图 要实现这个效果。很简单。 定义CSS样式 a:hover{    background:#f29901;}这段代码的显示效果如下图显然，这样太丑了。只需要再加上一句a:hover{    background:#f29901;    display:block;}即可如效果图所示，当鼠标移动到超链接上的时候，整个l
前端CSS小作业练习（四）
数据库爆破专家的博客
06-14 1719
文章目录题目要求>图1>图2>代码> 题目要求> 网站实现如下内容（见图1，图2）： （1）包含1个网页。（1分） （2）网页中要用到表格， a) 表格分成2行，第一行包含表头单元格（1分） b) 第二行包含普通单元格（1分） c）表格宽度300px（1分） （3）表格第一行 a) 有背景颜色#3cc（1分） b) 文本居中对齐（1分） c)
Web前端——CSS基础样式
巧克力布丁的博客
10-05 2270
一. 样式的继承 1. 定义 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 2. 范围 继承是发生在祖先元素和后代元素之间 3. 优点 继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式 4. 注意 并不是所有的样式都会被继承 比如：背景相关的，布局相关的这些样式都不会被继承 5. 例子 注：span的背景颜色并不是被继承的，只是span的背景默认是透明的，所以p标签的背景颜色透了过去 <!DOCTYP
自学web前端练手——用Bootstrap实现简易版响应式页面
lvshaoshishang的博客
03-28 831
主要采用了Bootstrap的栅格系统、导航条、按钮组、巨幕、列表组，今晚刚学这个也太好用了吧！！ 不用自己写代码只需要改成中文内容就行了O(∩_∩)O哈哈~ 效果如下： pc端显示效果如下： 调用F12点击切换设备工具栏后显示效果如下：（我自己用手机打开该页面测试过，就是下面这个效果） 代码如下： <!DOCTYPE html> <html lang="en"> &l...
html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
weixin_35797090的博客
05-31 6145
css鼠标悬停超链接文字上时背景改变，鼠标经过文字链接时(悬停)，文字的背景图片发生改变(出现背景图片或背景颜色)。鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇。此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式。利用以下代码：a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读：ie6 hover)一、链接文字无背景...
鼠标悬停，背景颜色变化问题
weixin_30635053的博客
04-07 1481
实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .container{ ...
鼠标悬浮改变背景颜色
weixin_45743799的博客
11-03 4984
将鼠标放在div上时div的背景颜色发生改变，把鼠标移走div之后，div的背景颜色回复原来的颜色。 效果图演示 没有将鼠标放在div上时（lanse） 将鼠标放在div上之后（变为红色） 下面看代码 由于代码较短，要认真观看了解呦。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值