CSS实例 简单案例

article/2025/11/11 8:03:19

CSS文件

注意改变图片的样式时,是要加给图片所在的标签 比如p

/* 整体 */
body {font: 16px/28px "Microsoft YaHei";
}/* 大标题 */
h1 {font-weight: 600;text-align: center;
}/* 连接a */
a {text-decoration: none;
}/* 时间 来源 */
.scor {font-size: 12px;text-align: center;color: #888888;
}/* 搜索栏文字 */
.search {color: #666;
}/* 按钮 */
.btn {font-weight: 700;
}/* 文本 */
p {text-indent: 2em;
}/* 图片 要加给图片所在的标签 比如p */
.pic {text-align: center;
}

HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 练习网 </title><link rel="stylesheet" href="style.css">   
</head>
<body ><h1>大标题</h1><div class="scor">时间 网站名 来源:<a href="https://www.baidu.com" target="_blank">百度应该可以了吧</a><input type="text" width="170px" value="请输入搜索内容" class="search"><input type="button" value="搜索" class="btn"></div><hr><p>写了那么多结果审核没过,这是第一段</p><p class="pic"> <img src="images/1.jpg" alt="图片裂了" title="七架飞机"> </p><p>好难受,花了好长时间,结果过不去,这是第二段</p><h4>第一个副标题</h4><p>太难了,我就想找个地方保存一下代码,第三段了</p><p应该就快完了吧,都第四段了</p><p class="pic"> <img src="images/2.jpg" alt="图片裂了" title="好多飞机"> </p><h4>第二个副标题</h4><p>怎么还有两段,已经倒数第二段了</p><p class="pic"> <img src="images/3.jpg" alt="图片裂了" title="竖着排的飞机"> </p><p>终于完了</p></body>
</html>

在这里插入图片描述
屈服了


http://chatgpt.dhexx.cn/article/hH5Ey8tv.shtml

相关文章

CSS案例(1)

写在前面&#xff1a;本篇所有 css 均使用内嵌式引入。若想使用外链式&#xff0c;需先新建 .css 文件&#xff0c;再通过 link 标签引入到 html 里&#xff0c;样式部分的代码基本不用做其他修改。 目录 1 导航栏样式 2 商品展示页面 3 简单新闻页面 4 布局样式 1 导航栏样…

小案例CSS

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content"widthde…

CSS常见样式的介绍和使用(附加案例)

CSS样式 一、css介绍 层叠样式表(英文全称&#xff1a;Cascading Style Sheets) ​ 是一种用来表现HTML标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&#xff0c;还可以…

CSS 示例

基础内容 引入样式表&#xff1a;<link rel"stylesheet" href"test.css"> em&#xff1a;相对大小单位 选择器 示例说明#id选择所有类.clsss选择所有类p选择所有p标签&#xff0c;可以加逗号分组p em后代选择器&#xff0c;选中p标签中所有em标签…

CSS-200个小案例(一)

最近我在youtube上跟着大神学习200个CSS小案例&#xff0c;作者Online Tutorials 编码的内容很实用&#xff0c;案例中涉及定位、变换、动画等概念&#xff0c;适合进一步学习和巩固CSS知识&#xff0c;能帮助我们实现页面的特效。 youtube视频链接&#xff1a;https://www.you…

30个超棒的CSS应用实例

这 篇文章是很早之前在博客园看到的&#xff0c;收藏在网摘里&#xff0c;今天再看发现实在很棒&#xff0c;转载过来方便以后参考用&#xff0c;最棒的地方是这些效果的实现都只是利用CSSHTML 来实现的&#xff0c;基本上没有用到什么FLASH或JS脚本&#xff0c;大家也可以看看…

【CSS实例】

学习目标&#xff1a; css样式学习、总结&#xff0c;知识巩固 学习内容&#xff1a; 在这里我将会发布一些自己学习过程中完成的css实例&#xff0c;可能是跟着网上学习的练习作品&#xff0c;也可能是自己的随意的一个想法。每个作品中会列出编写思路&#xff0c;和编写过程…

codewar代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…

codewar python 遗忘点

2019独角兽企业重金招聘Python工程师标准>>> 1、计算字符串中特定字符串出现的次数 s this is a new technology,and I want to learn this. print(s.count(this, 0, len(s))) #目标字符串区分大小写 2、数字左边补0的方法,字符串补空格 #python中有一个zfil…

Codewar - Bit Counting

2019独角兽企业重金招聘Python工程师标准>>> Write a function that takes an (unsigned) integer as input, and returns the number of bits that are equal to one in the binary representation of that number. Example: The binary representation of 1234 is…

codewar 代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…

codewar 代码练习2——7级晋升6级

7级晋升到6级的过程中以做6级题以及以前未完成的题目为主&#xff0c;一般选择算法题或者基础题。相比之前从8级升级7级&#xff08;参见此博客&#xff1a;http://blog.csdn.net/m0_37324740/article/details/78408249&#xff09;的难度有所提前&#xff0c;并且一些题目结合…

R数据分析,codewar的年终总结,和一周年总结

前阵子单位各个部门都在要求弄总结&#xff0c;想想自己这个公众号也写了快一年了&#xff0c;专门回去翻了翻&#xff0c;这个公众号发布的第一篇文章是在2021年的1月17日&#xff0c;我想2022年的1月17日我就把现在敲的文字推出来吧&#xff0c;也算是一个年终和周年总结。 …

CodeWar题目

打算把不同网站上面的题目分开整理&#xff0c;免得麻烦。Code War上面我还是刷了一堆6级及以下的题目的&#xff0c;不过价值不大&#xff0c;这种不太能够训练实际解决问题的能力&#xff0c;所以我已经很久没上过了&#xff0c;有时间了可能会重新上去刷题吧&#xff0c;到时…

Codewar 笔记

1. Weight for weight 题目&#xff1a; For example 99 will have “weight” 18, 100 will have “weight” 1 so in the list 100 will come before 99. Given a string with the weights of FFC members in normal order can you give this string ordered by “weights”…

codewar刷题,苦海造舟之始

今天又是被惨虐的一天&#xff0c;尽管今天是我这篇处女座发布的日子。   事情是这样的&#xff0c;身为一个刚迈步进入编程领域的小白&#xff0c;在无忧无虑&#xff0c;轻松惬意的心情下刷完了一套python课后&#xff0c;偶然间&#xff0c;很突然地了解到codewars这么个玩…

Codewar一些积累No.2 从矩阵的加法体会vector的用法

用代码实现矩阵加法问题 最近在Codewar上看到一个有趣的问题是关于矩阵的加法问题. 题目中, 我所要编写的函数的传入参数是两个向量, 而且此向量是嵌套的, 具体内容如下: std::vector<std::vector<int> > matrixAddition(std::vector<std::vector<int> …

Java到底好不好学

Java到底好不好学 答案是&#xff1a;不难学。很多人都以为编程是个很高深的东西&#xff0c;其实不然&#xff0c;真正学习了你会发现编程比你高中学的数理化要简单的多。说它不难呢&#xff0c;如果学深入了&#xff0c;还算有很多东西要学习&#xff0c;比如你学Java&#…

java面试为何那么难

java面试为何那么难 “面试造火箭、工作拧螺丝”&#xff0c;曾经这么一句调侃的话总是用来形容IT行业中的面试情况。作为一个流浪的程序猿&#xff0c;多年以来作为应聘者也好、面试官也罢&#xff0c;渐渐感受到java开发的面试不再仅仅在“造火箭”那么容易。 我的就职历程…

java面试为何那么难?

“面试造火箭、工作拧螺丝”&#xff0c;曾经这么一句调侃的话总是用来形容IT行业中的面试情况。作为一个流浪的程序猿&#xff0c;多年以来作为应聘者也好、面试官也罢&#xff0c;渐渐感受到java开发的面试不再仅仅在“造火箭”那么容易。 五年前的java面试是怎么样的 用HT…