发表于： 2022-11-10 21:48:57
0 705
任务十五的部分less代码：
@color:#fff;
@bgcolor:#29b078;
@media screen and (max-width: 960px){
/* 手机端CSS代码 */
}
* {
margin: 0;
padding: 0;
}
.box {
width: 100%;
margin: 0 auto;
background-color: #fafafa;
}
li {
padding: 10px;
list-style: none;
}
.icon {
float: right;
width: 50px;
padding: 0 10px;
margin-top: -20px;
}
.head {
height: 39px;
width: auto;
background-color: white;
}
.head p {
font-size: 14px;
color: @bgcolor;
margin: 10px 0 0 200px;
}
.chart {
width: auto;
margin-right: 15%;
}
.cooperation {
width: 100%;
background-color: #fafafa;
}
.navigation {
background-color: @bgcolor;
width: 100%;
display: inline-block;
}
.navigation img {
margin-left: 200px;
margin-top: 30px;
display: inline-block;
}
datalist {
display: inline-block;
}
summary {
position: relative;
cursor: pointer;
list-style: none;
width: 4rem;
height: 2.8rem;
display: inline-block;
float: right;
}
span {
position: absolute;
display: block;
width: 4rem;
height: 0.6rem;
background-color: #333333;
transition: 0.3s;
}
span:first-child {
top: 0;
}
span:nth-child(2) {
top: calc(50% - 0.3rem);
}
span:last-child {
bottom: 0;
}
details[open] span:nth-child(2) {
display: none;
}
details[open] span:first-child {
top: calc(50% - 0.3rem);
transform: rotate(-45deg);
transform-origin: center;
}
details[open] span:last-child {
top: calc(50% - 0.3rem);
transform: rotate(45deg);
transform-origin: center;
}
nav {
position: absolute;
left: 0;
top: 174px;
width: 100%;
height: 0;
background-color: @bgcolor;
overflow: hidden;
}
details[open] +nav {
height: calc(200px - 5%);
z-index: 1;
}
nav ul {
list-style: none;
text-align: center;
padding: 0;
}
nav li {
font-size: 20px;
color: @color;
display: inline-block;
}
.a {
text-align: center;
line-height: 60px;
display: block;
}
li a {
color: @color;
text-decoration: none;
}
.browse {
width: 100%;
height: auto;
position: relative;
}
.image {
max-height: 100%;
max-width: 100%;
width: 100%;
z-index: 0;
}
.content {
width: 100%;
}
.b {
width: 100%;
margin-top: 50px;
display: inline-block;
}
.b h5 {
font-size: 15px;
}
.b a {
font-size: 15px;
color: @bgcolor;
text-decoration: none;
}
.list {
width: 100%;
background-color: @color;
}
.list p {
font-size: 20px;
color: #333333;
text-align: center;
padding: 20px 0;
border-bottom-style: solid;
border-color: #e6e6e6;
font-weight: bolder;
}
.p {
list-style-type: circle;
}
.list ul li {
font-size: 17px;
color: #f9a372;
margin-top: 30px;
margin-left: 150px;
}
.d{
color: @bgcolor;
}
.c {
color: #f9a372;
}
.introduce {
width: 100%;
background-color: @color;
display: flex;
}
.introduce p {
color: #b5b5b5;
font-size: 15px;
margin: 40px 40px
}
.introduce img {
width: auto;
height: auto;
margin: 5%;
}
.low {
width: 100%;
background-color: @bgcolor;
display: block;
}
.public1 {
display: block;
margin-left: 30%;
margin-top: 10%;
}
.public2 {
display: block;
margin-top: 8%;
}
.public4 {
display: flex;
margin-top: 2%;
}
.public3 {
float: right;
display: block;
margin-top: 5%;
}
.public3 p {
color: @color;
margin-bottom: 0;
margin-top: 15px;
margin-right: 20px;
}
.col-lg-4 p {
color: #ffffff;
margin-bottom: 0;
margin-top: 15px;
margin-right: 20px;
}
.public img {
padding-top: 5%;
padding-left: 5%;
}
.row {
--bs-gutter-x: 0;
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet/less" type="text/css" href="jieshao.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<title>任务十四练习</title>
</head>
<body>
<div class="box">
<div class="head ">
<p>客服热线:010-594-78634</p>
<div class="chart">
<img class="icon" src="tupian/图层%201.png">
<img class="icon" src="tupian/图层%202.png">
<img class="icon" src="tupian/图层%203.png">
</div>
</div>
<div class="navigation">
<!-- <div class="row">-->
<!-- <div class="col-lg-6 col-md-6 col-sm-6">-->
<!-- <img src="tupian/技能树.png">-->
<!-- </div>-->
<!-- <div class="col-lg-6 col-md-6 col-sm-6">-->
<!-- <div class="d">-->
<!-- <details>-->
<!-- <summary data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- </summary>-->
<!-- </details>-->
<!-- <nav>-->
<!-- <ul>-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </nav>-->
<!-- </div>-->
<!-- <details>-->
<!-- <summary data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- </summary>-->
<!-- </details>-->
<!-- <nav>-->
<!-- <ul>-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </nav>-->
<!-- <ul class="wrap">-->
<!-- <li>-->
<!-- <a href="#home">导航</a>-->
<!-- <ul id="home">-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </li>-->
<!-- </ul>-->
<!-- -->
<!-- -->
<!-- -->
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<img src="tupian/技能树.png">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="a">
<ul>
<li style="display: inline-block;"><a href="#">首页</a></li>
<li style="display: inline-block;"><a href="#">职业</a></li>
<li style="display: inline-block;"><a href="#">推荐</a></li>
<li style="display: inline-block;"><a href="#">关于</a></li>
</ul>
</div>
<!-- <div class="hidden-sm-6 hidden-md-6 hidden-lg-6">-->
<!-- <details>-->
<!-- <summary data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- <span></span>-->
<!-- </summary>-->
<!-- </details>-->
<!-- <nav>-->
<!-- <ul>-->
<!-- <li>首页</li>-->
<!-- <li>职业</li>-->
<!-- <li>推荐</li>-->
<!-- <li>关于</li>-->
<!-- </ul>-->
<!-- </nav>-->
<!-- </div>-->
</div>
</div>
<!-- </div>-->
</div>
<div class="browse ">
<img class="image" src="tupian/背景%201.png" alt="">
</div>
<div class="container">
<div class="content">
<div class="b">
<h5>首页><a href="#">合作企业</a></h5>
</div>
<div class="row">
<div class=" col-lg-4">
<div class="list">
<p style="color: #333333; font-size: 25px;">合作企业</p>
<ul>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">腾讯视频</a></li>
<li class="p" style="list-style-type: disc; font-size: 20px;"><a class="c" href="#">土豆网</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">腾讯视频</a></li>
<li class="p"><a class="d"href="#">土豆网</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
<li class="p"><a class="d"href="#">北京葡萄藤</a></li>
<li class="p"><a class="d"href="#">阿里巴巴</a></li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="introduce">
<img src="tupian/土豆网.png">
<p>土豆攻速成立于1998年11月，是目前中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。
成立10多年以来，腾讯一直秉承一切以用户为依归的经营理念，始终处于稳健、高速发展的状态。2004年6月16日，
腾讯公司在香港联交所主板公开上市（股票代号700）。</p>
</div>
<div class="introduce">
<p>土豆是中国最早和最具影响力的网络视频平台，是中国网络视频行业的领军品牌。其前身土豆网2005年4月15日
正式上线，是全球最早上线的视频网站之一。2014年1月，"土豆网"正式更名为"土豆"，标志着土豆进入品牌发展的新阶段。</p>
</div>
<div class="introduce">
<p>"每个人都是生活大丹导演"是土豆从创立第一天始的价值观。土豆相信年轻人的想象力、创造力,相信土豆的平台能帮助年轻人
创造出更多，更好的影像作品，来表达自己、生活和这个时代的看法。同时，土豆提倡尊重"每个人"的个性，尊重每个人自主地选择
自己的生活，成为自己成长的导演。</p>
</div>
<div class="introduce">
<p>2012年3月12日，优酷股份有限公司（NYSE:YOKU）("优酷")和土豆股份优先公司(NASDAQ:TUDO)（"土豆"）共同宣布，
优酷和土豆将以100%换股份防守合并。2012年8月20日，优酷土豆并方案获双方股东大会高票批准通过，优酷土豆集体公司正式诞生。
2013年4月，优酷土豆宣布进入"集团BU化"运营阶段，提出"优酷更优酷，土豆更土豆"的发展战略。</p>
</div>
<div class="introduce">
<p>2013年2月，杨伟东成为土豆总裁，宣布打造土豆"成为中国年轻人最喜爱的视频网站"，并明确土豆"成为中国最具影响力的
青年文化品牌"的愿景，确立土豆"青春、自主、有趣"的品牌定位，土豆全面进入2.0阶段。通过年轻化的内容、年轻化的
产品技术和年轻化的UGC/PGC生态三个方面来全面推动土豆2.0攻略。</p>
</div>
<div class="introduce">
<p>2014年3月土豆推出"4+1"战略。其中"4"代表的是土豆在内容方面更专注动漫、音乐、韩国娱乐、时尚四个垂直文化领域。
而"1"则代表土豆推出的"一个频道"战略，基于"频道主"和"订阅者"两个视角全方面架构跨屏和线上线下体验系统，
并结合用户体验、商业模式、运营机制等环节，提出5个"一"规划。</p>
</div>
<div class="introduce" style="margin-bottom: 300px;">
<p>根据第三方调研公司艾瑞的数据，优酷土豆集团在PC端和移动端全平台各项数据持续占据视频行业绝对领先优势，截止2014年3月，
土豆每个月独立访问用户数据增长到2.43亿。2013年土豆在移动端增长也非常迅猛，2013年三季度，土豆移动端获得高速增长，
月均覆盖用户较当年3月增长11倍，平均增长率超过40%;月均视频播放量增长23倍，月平均增幅度达60%。</p>
</div>
</div>
</div>
</div>
</div>
<div class="low row" style="--bs-gutter-x: 0;">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public1">
<p>技能树——改变你我</p>
</div>
<div class="public1">
<p>关于我们|联系我们|合作企业</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public2">
<p>旗下网站</p>
</div>
<div class="public4">
<p>草船云孵化器</p>
<p>最强IT特训营</p>
</div>
<div class="public4">
<p>葡萄藤轻游戏</p>
<p>桌游精灵</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="public3">
<p>微信公众号平台</p>
<img src="tupian/qrcode_for_gh_32213eeb65ba_1280.png">
</div>
</div>
</div>
</div>
</body>
</html>
今天练习部分js的知识点
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>js练习</title>
<!-- 内嵌式的js-->
<script>
// var a = true;
// console.log(a + 1 );
//
// var a2 = undefined;
// console.log(a2 + '李白' );
// console.log(a2 + 1 );
//
// var a4 = null;
// console.log(a4 + 1 );
//typeof可以测试值的类型
// var num = 10;
// console.log(typeof num); //number
// var str = '李白';
// console.log(typeof str); //string
// var s = true;
// console.log(typeof s); //boolean
// var s1 = undefined;
// console.log(typeof s1); //undefined
// var s2 = null;
// console.log(typeof s2); //object
// var age = prompt('请输入你的年龄');
// console.log(parseInt(age));
// console.log(typeof age);
//parseInt()可以把字符型转换为数字型 得到的是整数
// console.log(parseInt('3.14')); //结果是3，会取整
// console.log(parseInt('120px')); //结果是120 会去掉px单位
// console.log(parseInt('rem120px')); //结果是NaN
//parseInt()可以把字符型转换为数字型 得到的是小数 浮点数
// console.log(parseFloat('3.14')); //结果是3.14
// console.log(parseFloat('120px')); //结果是120 会去掉px单位
// console.log(parseFloat('rem120px')); //结果是NaN
//利用 String(变量)
// console.log(String('12'));
//
// //利用 NumBer(变量)
// console.log(Number('12'));
//
// console.log('123' - '120'); //3
// var age = prompt('请输入你的出生年份:');
// age1 = 2018 - age;
// alert('你今年' + age1 + '岁了');
// var b = prompt('请输入第一个数字:');
// var b1 = prompt('请输入第二个数字:');
// var c = parseFloat(b) + parseFloat(b1); //利用parseFloat()将变量转换为数字型再进行相加
// alert('你的结果是' + c);
// var myName = prompt('请输入你的名字:');
// var age = prompt('请输入你的年龄:');
// var sex = prompt('请输入你的性别:');
// alert('你的名字是:' + myName + '\n' + '你的名字是:' + age + '\n' + '你的名字是:' + sex);
//递增运算符
//前置递增运算符
var q =10;
++q;
var d = ++q + 1;
console.log(d); //13
//后置递增运算符
var w =10;
w++;
var d1 = w++ + 1;
console.log(d1); //12
var u =10;
var d2 = u++ + ++u;
console.log(d2); //24
</script>
<!-- 外部js代码 双标签-->
<!-- <script src="my.js"></script>-->
</head>
<body>
</body>
</html>
明计划：完成接下来的任务。
返回列表
评论