go-course/go17
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

补充css

Browse Source
This commit is contained in:
yumaojun03 2024-12-29 09:26:44 +08:00
parent 2f80aa91cb
commit f30f36771a
3 changed files with 92 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
homework/README.md
View File

@ -24,4 +24,5 @@ Web全栈开发(Book Api): 必须完成
day01: book restful api + config 包 的版本, 跑起来能验证成功
day02: book mvc 版本是必须要写出来(log 包允许你copy), mcube的版本是体验, mcube版本不做要求
day05: 自己使用map这种数据结果 做一个 轻量级的ioc框架, 如果不知道怎么写，可以参考15期: https://gitlab.com/go-course-project/go15/-/tree/main/vblog/ioc?ref_type=heads
day05: 自己使用map这种数据结果 做一个 轻量级的ioc框架, 如果不知道怎么写，可以参考15期: https://gitlab.com/go-course-project/go15/-/tree/main/vblog/ioc?ref_type=heads
day06: 仿照https://arco.design/docs/spec/introduce 顶部导航，默认出一个自己的顶部导航, 注意通过felix布局进行, 元素的具体内容可以不用管

32
skills/web/css/index.css Normal file
View File

@ -0,0 +1,32 @@
.first_title {
color: red;
}
#first_title:hover {
background-color: antiquewhite;
}
.first_title,#first_title {
font-size: 40px;
}
ul>li:first-child {
color: red;
}
[type="submit"] {
font-size: 2em;
}
.flex-test {
height: 60px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
border-bottom:1px solid rgb(229,230,235)
}
#overflowTest {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid rgb(150, 18, 18);
}

58
skills/web/css/index.html Normal file
View File

@ -0,0 +1,58 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- flex -->
<div class="flex-test">
<div>
左侧布局
</div>
<div>
右侧布局
</div>
</div>
<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
<h1 class="first_title" id="first_title">H1标题</h1>
<h2 class="first_title">H2标题</h2>
<h1>H1标题</h1>
<hr>
<ul id="list_menu" class="ul_class">
<li id="coffee">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<div>
<li>In Div</li>
</div>
</ul>
<hr>
<form action="demo_form.php">
<input type="submit" value="提交">
</form>
<hr>
<iframe style="width: 50vw;height: 200px;color: rgb(30, 107, 240);" src="https://www.mcube.top/docs/framework/">
<p>您的浏览器不支持 iframe 标签。</p>
</iframe>
<hr>
<div style="padding: 20px; margin: 20px; width: 200px;height: 200px; border: 1px solid purple;">
内容
</div>
</body>
</html>