CSS的综合练习2
1. 壹心理网页
我们用学到的CSS知识来实现下面的壹心理网页。
2. 分析思路
3. 代码实现
3.1 html文件
- 首页
- 阅读
问答
今日精华 99+- FM
- 测试
- 课程
- 成为咨询师
- 心理咨询
- 倾诉
- 鲸选V
登录
- 最新热文
- 鲸选
- 心理科普
- 婚恋情感
- 家庭关系
- 人际社交
- 自我察觉
- 更多分类
过度独立是一种创伤反应吗？
在亲密关系中，过度独立的人往往会表现出轻视、回避伴侣的行为，或回避与伴侣的沟通，从而给亲密关系增加焦虑和不必要的压力。
#童年创伤与霸凌
一个人痛苦的根源不是穷，而是这种毁灭性思维
“人生一切的不幸，没有别的原因，都是由自己的心灵吸引而来的，是无休止地倾诉不幸、牢骚不断的那颗心，唤来了不幸。”
#升级思维方式
变美这么累的话，我是不是在“服美役”呢？
因为容貌焦虑而驱动的变美行为，是一种美丽的枷锁。
#撕掉标签
焦虑型依恋，最擅长谈内耗式恋爱的人
Ta们总表现出来的愤怒和焦虑，其实是用来掩饰内心深处害怕被抛弃的恐惧。
“我好像得了亲密恐惧症”丨渴望爱却不敢走进的人，如何自救？
如果你也被亲密恐惧困扰，不要害怕伤害，不要放弃，试着去大胆求助。
#真实咨询故事
为何我会下意识害怕别人看到我在学习？
人是社会动物，我们的想法无可避免地被流行的思潮所影响。
#心理成熟与成年人
发布文章
3.2 css文件
/* 初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
/* 顶部导航条 */
.topbar {
position: relative;
margin: auto;
width: 1481px;
height: 73px;
}
/* 图片 */
.home-img {
position: absolute;
left: 100px;
width: 320px;
height: 73px;
transform: scale(0.35);
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
}
/* 文字 */
.home-text {
float: left;
height: 73px;
margin-left: 350px;
}
.home-text-1 {
display: inline-block;
height: 73px;
line-height: 73px;
padding: 0 9px;
font-size: 14px;
color: #4885b5;
position: relative;
cursor: pointer;
}
.home-text-2 {
display: inline-block;
height: 73px;
line-height: 73px;
padding: 0 9px;
font-size: 14px;
color: #000;
position: relative;
cursor: pointer;
}
.home-text-3 {
display: inline-block;
width: 4px;
height: 4px;
background-color: #121212d3;
padding: 0 1px;
border-radius: 50%;
position: relative;
cursor: pointer;
}
/* 问答的气泡 */
.today-prime {
position: absolute;
/* white-space取消换行 */
white-space: nowrap;
padding: 0 4px;
height: 15px;
line-height: 15px;
background: #ff816a;
border-radius: 8px;
top: 7px;
left: -15px;
color: #fff;
font-size: 12px;
text-align: center;
}
/* 搜索框的样式 */
.search-wrapper {
display: inline-block;
position: relative;
top: -279px;
left: 28px;
width: 150px;
height: 32px;
box-shadow: 0 0 2px #cdc6c6;
border-radius: 30px;
margin: 300px auto;
background: #f3f4f5;
}
/* 搜索内容的模型 */
.search {
position: absolute;
width: 20px;
height: 18px;
top: 50%;
transform: translate(-27px, -50%) scale(0.7);
cursor: pointer;
}
/* 输入搜索的内容 */
input {
width: 150px;
box-sizing: border-box;
height: 32px;
line-height: 32px;
font-size: 12px;
background: #f3f4f5;
border: 1px solid #eaeaea;
border-radius: 8px;
padding-left: 10px;
padding-right: 30px;
}
.home-span {
display: inline-block;
position: relative;
top: -279px;
left: 90px;
width: 150px;
height: 73px;
line-height: 73px;
padding: 0 9px;
font-size: 14px;
color: #4885b5;
position: relative;
cursor: pointer;
}
/* 轮播模型的设置 */
.banner {
width: 1481px;
height: 300px;
position: absolute;
top: 75px;
}
.banner-img {
width: 100%;
height: 300px;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
}
/* 轮播箭头的样式 */
.arrow1 {
background-image: url(./images/images/arrow1.png);
position: absolute;
width: 90px;
height: 90px;
left: -13px;
top: 50%;
transform: translateY(-50%) scale(0.7);
cursor: pointer;
}
.arrow2 {
background-image: url(./images/images/arrow2.png);
position: absolute;
width: 90px;
height: 90px;
right: -13px;
top: 50%;
transform: translateY(-50%) scale(0.7);
cursor: pointer;
}
/* 点的模型 */
.banner-point {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: 120px;
height: 20px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-around;
}
.point {
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: #fafafa;
border-radius: 50%;
cursor: pointer;
}
/* 轮播的切换点颜色变换 */
.point:hover {
background-color: #0a7ffe;
}
/* 文章模型 */
.article-wrapper {
position: relative;
top: 318px;
margin: auto;
width: 1481px;
height: 42px;
}
.article-text {
float: left;
height: 42px;
margin-left: 350px;
font-size: 14px;
}
/* 文章字体的样式调整 */
.article-text-1 {
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 9px;
color: #4885b5;
position: relative;
border: 1px solid #0b8bff;
border-radius: 90px;
color: #0b8bff !important;
cursor: pointer;
}
.article-text-2 {
display: inline-block;
height: 42px;
line-height: 42px;
padding: 0 9px;
color: #000;
position: relative;
cursor: pointer;
}
.article-text-3 {
display: inline-block;
width: 4px;
height: 4px;
background-color: #121212d3;
padding: 0 1px;
border-radius: 50%;
position: relative;
cursor: pointer;
}
/* 发布文章样式 */
.send-article {
position: relative;
float: right;
right: -200px;
margin-top: 21px;
cursor: pointer;
font-size: 14px;
}
.article-img {
width: 20px;
height: 20px;
position: absolute;
top: -4px;
left: -12px;
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
}
.article-span {
margin-left: 16px;
}
/* 主要内容 */
.content {
width: 980px;
height: 706px;
position: relative;
top: 350px;
margin: auto;
}
/* 图片的调整 */
.img1-wrapper {
width: 480px;
height: 136px;
position: absolute;
left: 0;
}
.img2-wrapper {
width: 480px;
height: 136px;
position: absolute;
right: 0;
}
.img3-wrapper {
width: 480px;
height: 136px;
position: absolute;
left: 0;
top: 300px;
}
.img4-wrapper {
width: 480px;
height: 136px;
position: absolute;
right: 0;
top: 300px;
}
.img5-wrapper {
width: 480px;
height: 136px;
position: absolute;
left: 0px;
bottom: 0px;
}
.img6-wrapper {
width: 480px;
height: 136px;
position: absolute;
right: 0;
bottom: 0px;
}
/* 文字的样式调整 */
.img-title {
position: relative;
margin: 24px 0;
flex: 1;
}
.main-title {
font-size: 16px;
color: #333;
font-weight: 700;
margin-bottom: 11px;
overflow: hidden;
position: absolute;
left: 146px;
margin-right: 84px;
margin-top: -128px;
cursor: pointer;
}
.small-title {
font-size: 12px;
color: #666;
overflow: hidden;
position: absolute;
left: 145px;
bottom: 47px;
margin-right: 69px;
line-height: 17px;
}
.ci-title {
font-size: 12px;
color: #5c96ff;
position: absolute;
left: 146px;
bottom: 27px;
cursor: pointer;
}
文章链接
本文由 用户 于 2024-03-11 发布在 夸智网，如有疑问，请联系我们。
本文链接：https://www.kuazhi.com/post/713454519.html
发表评论