AI 助理
备案控制台
开发者社区 云计算 文章 正文

A2021-A2022年度总结项目内容（三）（一）

2023-02-17 69
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： A2021-A2022年度总结项目内容（三）

CSS3你学会了多少？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.6.js"></script>
    <style>
        *{
            background-image: linear-gradient(0deg,lightskyblue  ,whitesmoke);
            font-size: 30px;
            text-shadow: 1px 1px 1px pink;
            font-weight: bolder;
            border:   lavender 1px;
            color: white;
        }
        .top{
            height: auto;
            width: 100%;
            margin-left: 0;
            background-color:  paleturquoise;
            /*   position: fixed;*/
            top: 2px;
            margin-bottom: 6%;
        }
        .top.li{
            width: auto;
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 6%;
            padding: 0px;
        }
        .top li a{
            display: block;
            color: #FF0000;
            background-color: whitesmoke;
            text-align: center;
            font-size: 18px;
            padding: 4px;
            overflow: hidden;
            text-decoration: none;
        }
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            border-radius: 9%;
            background-color: paleturquoise;
            border:solid 3px #c3c3c3;
            font-size: 16px;
        }
        #panel
        {
            padding:50px;
            display:none;
            font-size: 29px;
            color:black;
        }
        .qw{
            text-align: center;
        }
    </style>
    <title>主界面</title>
</head>
<body>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
        $(document).click(function () {
            $("#panel").css("font-size","26px");
            alert("欢迎来到Hellow World see you 程序员")
        })
    });
</script>
<h1 style="text-align: center">主界面运行窗口</h1>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">
   CSS的学习内容一到19
</div>
<hr>
<div class="top">
    <center>
        <ol>
           <li><a href="Css的学习内容一.html">Css的学习内容一</a></li>
            <li><a href="Css的学习内容二.html">Css的学习内容二</a></li>
            <li><a href="二D重点一.html">二D重点一</a></li>
            <li><a href="动画打字机.html">动画打字机</a></li>
            <li><a href="伪类选择器.html">伪类选择器</a></li>
            <li><a href="A1.html">A1.html</a></li>
            <li><a href="动画三.html">动画三.htm</a></li>
            <li><a href="弹性布局1.html">弹性布局1</a></li>
            <li><a href="弹性布局2.html">弹性布局2.</a></li>
            <li><a href="动画加二D.html">动画加二D.</a></li>
            <li><a href="动画的旋转.html">动画的旋转</a></li>
            <li><a href="属性选择器.html">属性选择器</a></li>
            <li><a href="案例.html">案例</a></li>
            <li><a href="自定义字体.html">自定义字体</a></li>
            <li><a href="动画的散开.html">动画的散开</a></li>
            <li><a href="动画来回循环.html">动画来回循环</a></li>
            <li><a href="圆角边框.html">圆角边框</a></li>
            <li><a  href="圆角属性一.html">圆角属性一</a></li>
            <li><a  href="渐变.html">渐变</a></li>
        </ol>
    </center>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.6.js"></script>
    <style>
        *{
            background-image: linear-gradient(0deg,lightskyblue  ,navajowhite);
            font-size: 30px;
            text-shadow: 1px 1px 1px pink;
            font-weight: bolder;
            border:   lavender 1px;
            color: white;
        }
        .top{
            height: auto;
            width: 100%;
            margin-left: 0;
            background-color:  paleturquoise;
            /*   position: fixed;*/
            top: 2px;
            margin-bottom: 6%;
        }
        .top.li{
            width: auto;
            list-style-type: none;
            white-space: nowrap;
            overflow: hidden;
            margin-left: 6%;
            padding: 0px;
        }
        .top li a{
            display: block;
            color: #FF0000;
            background-color: whitesmoke;
            text-align: center;
            font-size: 18px;
            padding: 4px;
            overflow: hidden;
            text-decoration: none;
        }
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            border-radius: 9%;
            background-color: paleturquoise;
            border:solid 3px #c3c3c3;
            font-size: 16px;
        }
        #panel
        {
            padding:50px;
            display:none;
            font-size: 29px;
            color:black;
        }
        .qw{
            text-align: center;
        }
    </style>
    <title>主界面</title>
</head>
<body>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
        $(document).click(function () {
            $("#panel").css("font-size","26px");
            alert("欢迎来到Hellow World see you 程序员")
        })
    });
</script>
<h1 style="text-align: center">主界面运行窗口</h1>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">
 CSS学习模块第二部分
</div>
<hr>
<div class="top">
    <center>
        <ol>
           <li><a href="CSS学习内容一.html"></a></li>
            <li><a  href="渐变.html">渐变</a></li>
            <li><a href="CSS学习内容二.html">项目四</a></li>
            <li><a href="堆1.html">堆1</a></li>
            <li><a href="定位.html">定位</a></li>
            <li><a href="定位三.html">定位三</a></li>
            <li><a href="属性选择器.html">属性选择器</a></li>
            <li><a href="弹性布局1.html">弹性布局1</a></li>
            <li><a href="弹性布局2.html">弹性布局2</a></li>
            <li><a href="案例.html">案例</a></li>
            <li><a href="浮动练习一.html">浮动练习一</a></li>
            <li><a href="浮动练习二.html">浮动练习二</a></li>
            <li><a href="浮动练习三.html">浮动练习三.</a></li>
            <li><a href="浮动四.html">浮动四</a></li>
            <li><a href="浮动五.html">浮动五</a></li>
            <li><a href="盒子居中问题1.html">盒子居中问题1</a></li>
            <li><a href="盒子居中问题2.html">盒子居中问题2</a></li>
            <li><a href="盒子居中问题3.html">盒子居中问题3</a></li>
            <li><a href="盒子居中问题4.html">盒子居中问题4</a></li>
            <li><a href="盒子居中问题5.html">盒子居中问题5</a></li>
            <li><a href="自定义字体.html">自定义字体</a></li>
        </ol>
    </center>
</div>
</body>
</html>

上面讲述了CSS3要学的内容。

body{
  font-size: 20px;
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  max-width: 100%;
}
#top{
  padding: 20px 0;
  width: 100%;
  background-color: #222;
}
.topList{
  display: table;
  width: 100%;
}
.topList li{
  display: table-cell;
}
.topList li>a{
  display: block;
  text-align: center;
  color: white;
}
/*left*/
#content{
  width: 100%;
  margin: 10px 0 20px 0;
  overflow: hidden;
  float: right;
}
/*left整体*/
.left_side{
  float: left;
  width: 60%;
  margin-left: 1.2%;
}
.top_pic{
  padding: 10px 60px;
  background-color: #eee;
}
/*新品样式*/
#products div{
  width: 30%;
  display: inline-block;
  padding: 0 10px;
}
/*right*/
#right-side{
  float: right;
  width: 28%;
  margin-right: 1.2%;
}
.list-group{
  margin-bottom: 30px;
}
.list-title{
  padding: 10px 15px;
  font-weight: bold;
  color: red;
  background: palevioletred;
  border-color: #337ab7;
}
.list-item{
  padding: 10px 15px;
  margin-bottom: -1px;
  border: 2px solid #00A40C;
}
#bottom{
  position: relative;
  width: 100%;
  height: 30px;
}
.bottom a{
  position: absolute;
  right: 1.2%;
}
.bottom p{
  position: absolute;
  margin: 0;
  left: 1.2%;
  font-style: italic;
  }
* {
  background: white;
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bolder;
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-decoration: none;
  background: linear-gradient(to left, pink,green);
}
#top {
  width: 100%;
  height: 50px;
  display: flex;
  align-content: space-around;
  justify-content: space-around;
}
.brand {
  font-size: 20px;
}
#top input[type=search] {
  widows: 200px;
}
.content {
  width: 90%;
  margin: 1px auto;
  padding: 5px;
  border: 1px #ADD8E6 solid;
  border-radius: 16px;
  box-shadow: 0px 0px 8px 0px #ADD8E6;
}
.pic-info img {
  border-radius: 15px;
  width: 100%;
}
.pic-info {
  display: flex;
  align-items: center;
}
.pic-box {
  flex: 0.7;
}
.pic-info ul {
  flex: 1;
}
.pic-info li {
  padding-left: 20px;
  line-height: 20px;
  font-size: 18px;
}
#login {
  width: 560px;
  height: 350px;
  border: 1px solid #ccc;
  position: absolute;
  background: #fff;
}
#login form {
  margin: 20px 5px 20px 90px;
}
#login h2 {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  color: lightcyan;
  background: #044599;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
  margin: 0 0 20px 0;
}
#login div {
  font-size: 14px;
  color: #666;
  padding: 5px 0;
  text-align: left;
}
#login input.text {
  width: 200px;
  height: 25px;
  border: 1px solid #ccc;
  background: #00CED1;
  font-size: 14px;
}
.pc {
  margin: 0 8px;
  color: #00BFFF;
}
#login input.submit {
  width: 107px;
  height: 40px;
  background: darksalmon;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  font-size: 22px;
  font-family: "黑体";
  margin: 20px 120px;
  border-radius: 6px;
}
#top {
  padding: 20px 0;
  width: 100%;
  background-color: lightblue;
}
.topList {
  display: table;
  width: 100%;
}
.topList li {
  display: table-cell;
}
.topList li>a {
  display: block;
  text-align: center;
  color: dodgerblue;
}
*{
  font-size: 30px;
  color: red;
   text-shadow: 5px 5px 6px black;
}
h1{
  background-color: goldenrod;
  font-size: 35px;
  color: red;
   text-shadow: 5px 4px 6px green;
   text-align: center;
}
* {
  /*background-image: linear-gradient(0deg, deepskyblue, whitesmoke);*/
  background: paleturquoise;
  font-size: 28px;
  font-weight: bolder;
  border: lavender 1px;
  color: black;
  text-decoration: none;
  list-style: none;
  font-size: 30px;
  font-family: "Bernard MT Condensed";
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
li {
  border: 2px solid #D4D4D4;
  text-align: center;
  border-radius: 20px;
}
ul {
  display: flex;
}
li {
  flex-grow: 1;
}
* {
  background-color: lightblue;
  padding: 0px;
  margin: 0px;
  list-style: none;
  font-size: 30px;
}
/*css������*/
body {
  font-size: 23px;
}
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
li {
  border: 2px solid #D4D4D4;
  text-align: center;
  border-radius: 20px;
}
li p {
  text-align: center;
}
/*css3*/
li:first-child {
  background-color: rgba(199, 166, 4, 0.1);
}
/*��������*/
@keyframes anima {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*�Զ��������*/
@font-face {
  font-family: Bahnschrift;
}
li:first-child img:hover {
  animation-name: anima;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
li img:hover {
  animation-name: anima;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
li:last-child img:hover {
  animation-name: anima;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
ul {
  display: flex;
}
li {
  flex-grow: 1;
}
#news {
  column-count: 3;
  column-gap: 30px;
}
*{
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(to right,red,pink,blue);
  text-shadow: 3px 1px paleturquoise;
}
body,html{
  height: 100%;
  width: 100%;
  font-family: myfont;
  background: linear-gradient(to right,yellow,pink,blue);
}
header{
  height: 15%;
  width: 100%;
  background: lavender;
  background: linear-gradient(to left,pink,pink,blue);
}
section{
  height: 75%;
  width: 100%;
  background: lightblue;
}
@font-face {
  font-family:"myfont";
  src: url('STCAIYUN.TTF');
}
footer{
  height: 10%;
  width: 100%;
  background: lemonchiffon;
}
section p{
  width: 80%;
}
section span{
  width: 80%;
  color: navajowhite;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section a:link{
  background-color: orange;
}
section a:visited{
  color: lightpink;
}
#grad1{
  height: 10px;
  background: linear-gradient(to right,red,pink,blue);
  border-radius: 20px;
  box-shadow: 2px 5px 2px #00BFFF;
}
footer p{
  text-shadow: 1px 1px #00BFFF;
}
 @keyframes anima {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
*{
  background-color: lightcyan;
  font-size: 20px;
  margin: 2px;
}
.list1 li{
  list-style-type: none;
  border:2px solid ;
}
.list{
  list-style-type: none;
  }
@font-face {
    font-family: f;
        /*src: url('STCAIYUN.TTF');*/
        src: url('YUGOTHB.TTC');
      }
.list li{
  font-family: f;
}
.list1 li:nth-child(1){
  border: 1px solid palevioletred;
  border-radius: 6px;
  box-shadow: 0 1px 1px #FFC0CB;
}
.list1 li:last-child{
  border: 1px solid palevioletred;
  border-radius: 6px;
  box-shadow: 0 1px 1px #FFC0CB;
}
.list1 li:nth-child(1){
  background: hsla(0,50%,50%,0.7);
}
.list1 li:nth-child(2){
  background: hsla(0,50%,80%,0.9);
}
.list1 li:nth-child(3){
  background: hsla(40%,40%,50%,0.7);
}
.list1 li:last-child{
  background: hsla(0,100%,60%,0.7);
}
t75yjb52rsccc
目录
相关文章
钊气蓬勃.
|
C++
组合计数及补充
组合计数及补充
钊气蓬勃.
68 0
YiYa_咿呀
|
机器学习/深度学习
【知识补充】
【知识补充】
YiYa_咿呀
47 0
t75yjb52rsccc
A2021-A2022年度总结项目内容。（一）
A2021-A2022年度总结项目内容。（一）
t75yjb52rsccc
56 0
.昭阳.
|
前端开发
第一个网页总结暨前端基础知识补充
一，css基本引入 二，字体引入样式 三，类名约定 四，文字相关 五，相关技巧 分竖线 六，案例遇到问题及解决方法 七，文本格式化标签 八，meta标签 九，表格 十，input表单 十 一，dl标签 十二，css相关补充 背景， 透明图像，opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png) 在搜索框内添加图标 css3 边框-阴影，圆角 文本溢出显示，换行 css3 2D转换 transition过渡 Bootstrap4 颜色引用 Bootstrap4 进度条
.昭阳.
90 0
第一个网页总结暨前端基础知识补充
半只牛马
|
编译器 程序员 C语言
C++入门（内容补充）
之前给大家更新了一系列关于C++的基础语法，那么今天小编再给大家进行部分内容的补充，然后我们马上就会进入类有关内容的介绍。
半只牛马
73 0
t75yjb52rsccc
|
前端开发 JavaScript
A2021-2022年度总结（项目内容五）
A2021-2022年度总结（项目内容五）
t75yjb52rsccc
94 0
A2021-2022年度总结（项目内容五）
t75yjb52rsccc
|
JavaScript 前端开发
A2021-A2022年度总结（项目内容四）（一）
A2021-A2022年度总结（项目内容四）
t75yjb52rsccc
112 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（四）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
85 0
t75yjb52rsccc
A2021-A2022年度总结项目内容（三）（二）
A2021-A2022年度总结项目内容（三）
t75yjb52rsccc
96 0
t75yjb52rsccc
A2021-A2022年度总结（项目内容四）（三）
A2021-A2022年度总结（项目内容四）
t75yjb52rsccc
71 0