css一些简单的例子

作者：手机用户2602934713 | 来源：互联网 | 2023-08-13 16:25

1.http协议1一：HTTP协议：hypertexttransportprotocol(超文本传输协议)2特点：31.请求与响应42.无状态的协议5请求协议：6请求首行：7请求头

1.http协议

 1 一：HTTP协议：hypertext transport protocol(超文本传输协议)
 2     特点：
 3         1.请求与响应
 4         2.无状态的协议
 5     请求协议：
 6         请求首行：
 7         请求头信息：
 8                 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
 9                 Accept-Encoding:gzip, deflate, br
10                 Accept-Language:zh-CN,zh;q=0.9
11                 Connection:keep-alive
12                 COOKIE:BAIDUID=47A6DD50BC3D91236FEE1906BD2DE0B6:FG=1; BIDUPSID=47A6DD50BC3D91236FEE1906BD2DE0B6; PSTM=1510046493; ispeed_lsm=10; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598
13                 Host:www.baidu.com
14                 Upgrade-Insecure-Requests:1
15                 User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36
16         空行：
17         请求体：
18         --如果是get方式提交，数据是存放在UTL后面；而post是放在请求体中。
19     响应：
20         Bdpagetype:1
21         Bdqid:0x8f6422cd00053969
22         Bduserid:0
23         Cache-Control:private
24         Connection:Keep-Alive
25         Content-Encoding:gzip
26         Content-Type:text/html; charset=utf-8
27         Cxy_all:baidu+10365439d71d1527700dadaf75cc64b2
28         Date:Wed, 08 Nov 2017 10:05:53 GMT
29         Expires:Wed, 08 Nov 2017 10:05:32 GMT
30         Server:BWS/1.1
31         Set-COOKIE:BDSVRTM=0; path=/
32         Set-COOKIE:BD_HOME=0; path=/
33         Set-COOKIE:H_PS_PSSID=1424_24866_24558_21107_24879_22159; path=/; domain=.baidu.com
34         Strict-Transport-Security:max-age=172800
35         Transfer-Encoding:chunked
36         Vary:Accept-Encoding
37         X-Powered-By:HPHP
38         X-Ua-Compatible:IE=Edge,chrome=1

View Code

2.css选择器（标签名，id,类，属性，伪类）

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>csstitle>
 6 
 7     <style>
 8         #div2{
 9             color:red;
10             background:gray
11         }
12         #div1{
13             color:green;
14             background:blue
15         }
16 
17     style>
18     
19     
20     <link type="text/css" rel="stylesheet" href="mycss.css" />
21 head>
22 <body>
23     <div id="div2">hello worlddiv>
24     <div id="div1">nihaodiv>
25     <div id="div3">helllllldiv>
26 body>
27 html>

View Code

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css选择器title>
 6 
17     <style>
18         *{
19             font-size:45px;
20         }
21         p{
22             background-color:yellow;
23         }
24         div{
25             color:green;
26         }
27         #p1{
28             color:red;
29         }
30         .c1{
31             color:gray;
32             background-color:#8ABCD8
33         }
34     style>
35 head>
36 <body>
37     <p >hellop>
38     <div >hello div hello spandiv>
39     <p id="p1">你好p>
40     <div class="c1">我子啊div>
41     <div class="c1" >你们div>
42 body>
43 html>

View Code

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类选择器title>
 6 
 7     <style >
 8         a:link{
 9             color:red;
10         }
11         a:hover{
12             color:yellow;
13         }
14         a:visited{
15             color:purple;
16         }
17         a:active{
18             color:green;
19         }
20     style>
21 head>
22 <body>
23     <a href="https://www.baidu.com">百度a>
24 body>
25 html>

View Code

3.外边框和内边距

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>内外边距title>
 6 
 7     <style>
 8         body{
 9             border:dashed 5px red;
10 
11         }
12         .div1{
13             border:dashed 2px black;
14             height:200px;
15             width:30%;
16             background-color:purple;
17             margin:10px;
18             padding:10px;
19         }
20         .div2{
21             border:dashed 2px black;
22             height:200px;
23             width:20%;
24             background-color:green;
25             margin:20px;
26             padding:20px
27         }
28         .div3{
29             border:dashed 2px black;
30             height:300px;
31             width:20%;
32             background-color:blue;
33             margin:30px;
34             padding:30px
35         }
36     style>
37 head>
38 <body>
39 
40 <div class="div1">div1div>
41 <div class="div2">div2div>
42 <div class="div3">div3div>
43 body>
44 html>

View Code

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>练习title>
 6     <style>
 7         body{
 8             margin:0px;
 9             border:solid 2px
10         }
11         .div1{
12             height:300px;
13             width:300px;
14             background-color:green;
15             border:1px solid black;
16             padding:20px;
17         }
18         .div2{
19             height:100px;
20             width:100px;
21             background-color:red;
22             margin:100px
23         }
24     style>
25 head>
26 <body>
27 
28 
29     <div class="div1">11
30             <div class="div2">
31 
32             div>
33     div>
34 
35 body>
36 html>

View Code

css一些简单的例子

推荐阅读

spring
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
spring
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
spring
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
spring
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
spring
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
get
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
get
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
get
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
get
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
get
后台获取视图对应的字符串

1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]

蜡笔小新 2023-12-13 18:03:01
char
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
char
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
char
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
char
测试人的性格，点火让他着急，考验婚姻问题的善意玩人

本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

蜡笔小新 2023-12-14 09:10:09
get
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25

手机用户2602934713

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章