first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,3 @@
p {
color: green;
}

View File

@@ -0,0 +1,18 @@
p,span{
color: red;
}
.two {
color: blue;
}
#three {
color: green;
}
li:nth-child(5n) {
color: green;
}
ul li:first-child {
color: hotpink;
}
ul li:last-child {
color: hotpink;
}

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/demo.css">
<title>Document</title>
<style>
p {
color: blue !important;
}
h2:hover {
color: crimson;
}
h2::before {
content: "before ";
}
h2::after {
content: " after ";
}
::selection {
color: green;
background: yellow;
}
input:focus{
width: 200px;
}
</style>
</head>
<body>
<p>wwww</p>
<h2>hover测试</h2>
<input type="text" placeholder="输入搜索关键词" name="" id="">
</body>
</html>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 第一课</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<p>这是p标签1</p>
<p class="two">这是p标签2</p>
<p id="three">这是p标签3</p>
<p >这是p标签4</p>
<span>我是span</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -0,0 +1,86 @@
1: css 三种写法
1写在单独的css文件中 外链css
2x写在标签中 内部css忘记。。。。
3写在 head 里面 内链css
2css 的语法规则
选择器类型 {
属性名: 属性值;
}
3选择器
1标签选择器
标签名,标签名 {
属性名: 属性值;
}
2类(class)选择器(.
.类名,.类名 {
属性名: 属性值;
}
3id选择器#
#id名,#id名 {
属性名: 属性值;
}
class 和 id 选择器主要区别:
1id选择器定义的名称默认是唯一的
2id选择器主要结合js使用
4: 伪类选择器
nth-child
first-child
last-child
hover
focus
selection
before
after 用来绘制横线,图标等一些细节性的东西,在不影响网页布局的情况下实现细节
5: 通配符 *
6: 父子关系的表示
1xxx xxx
2: xxx > xxx
同级关系的表示
1: +
7: css 样式应用的优先级(权重)
最后的css样式会覆盖前面的后面权重 最高。
!important 会改变权重
3月11号
1: 实现task中的纯html结构布局
2: 把今天内容练到熟练,明天提问
3月12号如果时间足够的话
提前预习css更多属性
地址http://css.doyoe.com/
字体,
文本,
颜色,
3月13号
盒子模型,
定位,