Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

832303306-work3 #105

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

832303306-work3 #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1cbbc21
add: complete work1
betty11111122222 Oct 17, 2024
9cab1fc
add: modify work1
betty11111122222 Oct 28, 2024
b7b34c4
add: complete work2
betty11111122222 Nov 25, 2024
ded4ed7
add:modify work1
betty11111122222 Dec 7, 2024
04f8fc5
add: complete work3
betty11111122222 Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added work1/betty11111122222/homework1/all.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work1/betty11111122222/homework1/haimianbaobao.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added work1/betty11111122222/homework1/paidaxing.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 123 additions & 0 deletions work1/betty11111122222/homework1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
#container{
width:900px;
height:1000px;
background-color:#def3ff;
}/*这里设置整体的背景色*/
/*对顶上三个导航的颜色 距离 设置*/
#introduction{
font-size:15px;
float:left;
text-align:center;
width:300px;
height:5px;
}
#works{
font-size:15px;
float:left;
text-align:center;
width:300px;
height:5px;
}
#related{
font-size:15px;
float:left;
text-align:center;
width:300px;
height:5px;
}
/*对左边为all.jpeg图片的这个框架进行颜色 大小设置*/
#briefintro{
border:3px solid #5abcbd;
margin:0px 75px;
border-radius:20px;
width:700px;
height:140px;
padding:5px 20px 50px 0px;
}
#all{
float:left;
margin:0px 30px 0px 5px;
}
/*对下面海绵宝宝 派大星 章鱼哥的介绍进行颜色 大小设置*/
/*以下三个为海绵宝宝 派大星 章鱼哥的文字介绍部分设置*/
#yellow{
margin:0px 67px 15px 70px;
border:3px solid #f7cf39;
border-radius:25px;
width:200px;
height:100px;
color:white;
background-color: #f7cf39;
float:left;
text-align: center;
}
#blue{
margin:0px 78px 15px 50px;
border:3px solid #395d94;
border-radius: 25px;
width:200px;
height:100px;
color:white;
background-color: #395d94;
float:right;
text-align: center;
}
#pink{
margin-bottom:15px;
border: solid #ce827b;
border-radius:25px;
width:200px;
height:100px;
color:white;
background-color: #ce827b;
float:left;
text-align: center;
}
/*以下为海绵宝宝 派大星 章鱼哥的图片部分设置*/
#yellow1{
margin-left:96px;
}
#pink1{
margin-left:123px;
}
#blue1{
margin-left:120px;
}
/*以下为表格部分设置*/
#table{
margin:20px 72px;
border:1px solid transparent;
width:750px;
height:150px;
border-collapse: collapse;
}
.center{
text-align: center;
}
.col1{
background-color: #9ccbff;
}
.col2{
background-color: #84cfef;
}
.col3{
background-color: #639ace;
}
/*以下为建议部分设置*/
#suggestion{
border:3px solid #8ccfef;
border-radius:10px;
width:750px;
height:120px;
margin:40px 70px 20px 70px;
}
/*以下为按钮部分设置*/
#button{
width:100px;
height:30px;
background-color:#6396ef;
border: 3px solid #6396ef;
border-radius:3px;
color:white;
margin-left:725px;
}
Binary file added work1/betty11111122222/homework1/zhangyuge.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions work1/betty11111122222/homework1/设计稿.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"><!-- 引入样式表 -->
<title>设计稿</title><!-- 页面标题 -->
</head>
<body>
<div id="container"><!-- 整个页面的容器 -->
<a id="introduction" href="#briefintro">人物介绍</a><!-- "人物介绍"的锚点 -->
<a id="works" href="#table">系列作品</a><!-- "系列作品"的锚点 -->
<a id="related" href="#suggestion">我们相关</a><br><br><br><!-- "我们相关"的锚点 -->
<!--以上三个都利用id选择器-->
<!--这个部分为对海绵宝宝的介绍以及插入all.jpeg图片的位置-->
<div id="briefintro"><img id="all" src="all.jpeg" alt="all" width="180" height="180"><br><br><br>
海绵宝宝是一只黄色的方形海绵，住在太平洋深处风光优美无人知道的比基尼海滩水域下。那里是一个没有忧愁的世界，住着一群快乐的海洋生物。
</div><br><br><!--这里使用两个br标签来隔开上下两个部分-->
<!--这个部分为海绵宝宝 派大星 章鱼哥的介绍-->
<div id="yellow">
<b id="name">海绵宝宝</b><br>是动画片《海绵宝宝》系列中的主角，超级活泼可爱，给人带来快乐
</div>
<div id="pink">
<b id="name1">派大星</b><br>粉红色的海星，很可爱，和海绵宝宝交情最好。
</div>
<div id="blue">
<b id="name2">章鱼哥</b><br>大鼻子章鱼，对艺术有执着的追求，本质上是一个善良且有正义感的章鱼。
</div>
<img id="yellow1" src="haimianbaobao.jpeg" alt="海绵宝宝" width="150" height="150">
<img id="pink1" src="paidaxing.jpeg" alt="派大星" width="150" height="150">
<img id="blue1" src="zhangyuge.jpeg" alt="章鱼哥" width="150" height="150">
<!--系列作品部分以表格的形式呈现-->
<table id="table" class="center">
<tr>
<th>系列</th>
<th>日期</th>
<th>集数</th>
</tr>
<tr>
<td class="col1">海绵宝宝</td>
<td class="col2">2018年10月23日</td>
<td class="col3">60集</td>
</tr>
<tr>
<td class="col1">海绵宝宝</td>
<td class="col2">2018年10月23日</td>
<td class="col3">60集</td>
</tr>
<tr>
<td class="col1">海绵宝宝</td>
<td class="col2">2018年10月23日</td>
<td class="col3">60集</td>
</tr>
<tr>
<td class="col1">海绵宝宝</td>
<td class="col2">2018年10月23日</td>
<td class="col3">60集</td>
</tr>
<tr>
<td class="col1">海绵宝宝</td>
<td class="col2">2018年10月23日</td>
<td class="col3">60集</td>
</tr>
</table>
<!--这里为建议板块-->
<input type="text" name="suggestion" id="suggestion" required>
<!--这里为提交按钮-->
<input id="button"type="button" value="提交">

</div>

</body>
</html>
114 changes: 114 additions & 0 deletions work2/betty11111122222/demo1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>阿笠博士的新发明</title>

<style>
body {
padding-left: 10vw;
}
.question {
margin-top: 30px;
font-size: 22px;
}

.box {
margin-top: 64px;
width: 60%;
height: 200px;
font-size: 24px;
display: flex;
justify-content: space-between;
}
#blue {
width: 46%;
text-align: center;
line-height: 200px;
border: 2px solid #21a4f1;
}
#red {
width: 46%;
text-align: center;
line-height: 200px;
border: 2px solid #fc4b5a;
}
</style>
</head>

<body>
<div class="question">
<p>柯南的手表坏了，最近阿笠博士刚好设计了一款新型时钟（下方蓝框）。</p>
<p>
蓝框显示当前日期，当鼠标移入蓝框时，有放大效果且时间暂停；鼠标移出后时间继续更新。
</p>
<p>点击定格按钮，红框内显示定格的时间。</p>
</div>
<div class="box">
<div id="blue">
<span id="time"></span>
</div>
<div id="red">
<span id="pauseTime"></span>
</div>
</div>
<button id="btn" style="font-size: 24px; margin-top: 48px">定格</button>

<!-- 以上代码不可修改 -->

<!--
要求在下列代码中实现：
1. 页面上的时间每秒更新一次。
2. 鼠标移入 #blue 的时候 暂停时间的更新，并且有边框放大效果。
3. 鼠标移出 #blue 的时候 继续时间的更新，CSS 样式还原。
4. 点击定格按钮，#red 里面显示点击时候的时间。
-->
<script>
function updateTime(){
let el=document.getElementById('time');
let time=new Date();
time.toLocaleDateString();
time.toLocaleTimeString();
el.innerHTML=time.toLocaleDateString()+' '+time.toLocaleTimeString();
};
updateTime();
let intervalId=setInterval(updateTime,1000);
let blueBox=document.getElementById('blue');
blueBox.addEventListener('mousemove', function() {
let bottom=blueBox.getBoundingClientRect().bottom;
let left=blueBox.getBoundingClientRect().left;
let right=blueBox.getBoundingClientRect().right;
let top=blueBox.getBoundingClientRect().top;
let width=right-left;
let height=bottom-top;
let scale=1.2;
blueBox.style.transform='scale('+scale+')';
blueBox.style.width=width*scale+'px'
clearInterval(intervalId);
});
blueBox.addEventListener('mouseout', function() {
blueBox.style.width='46%';
blueBox.style.transform='scale(1)';
intervalId=setInterval(updateTime,1000);
});
let buttonToBeClicked=document.getElementById('btn');
let ele=document.getElementById('pauseTime');
function pauseTime(){
let time=new Date();
time.toLocaleDateString();
time.toLocaleTimeString();
ele.innerHTML=time.toLocaleDateString()+' '+time.toLocaleTimeString();
}
function repeatTime(){
if(ele.innerHTML==''){
pauseTime();
}else{
ele.innerHTML='';
}
}
buttonToBeClicked.addEventListener('click',repeatTime);

</script>
</body>
</html>
Loading
Loading