使用HTML CSS完成初步的页面,任务九:使用HTML/CSS实现一个复杂页面(示例代码)

任务目的

通过实现一个较为复杂的页面,加深对于HTML,CSS的实战能力

实践代码的复用、优化

任务描述

整个页面内容宽度固定,但头部的蓝色导航和浏览器宽度保持一致

任务注意事项

只需要完成HTML,CSS代码编写,不需要写JavaScript

tab只需要实现样式,有能力余力的同学可以尝试实现不使用JavaScript的情况下,实现Tab切换

所有的下拉菜单(Select)均要求按照设计稿样式实现,下拉后的样式自定义,不需要实现下拉选择的功能,但样式要实现

在Chrome中完美实现与设计稿的除了文字以外的各项图片、字体、颜色、布局、内外边距等样式

有能力的同学可以尝试跨浏览器的兼容性

有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务完成与总结:

一个人搞这个页面,肝有点不行,索性不切图了,计划直接把大概的页面写出来,然而写到第二天的时候完全失去耐心Zzzz,这次任务算是考验到我了。算了,还是分析其他人的代码吧,不过自己的代码还是要贴上,知道这次完成的十分不好,不管怎么说,毕竟是亲儿子(自己写出来的),就不嫌它丢人了。

下面是一个做的比较好的团队作品:

http://zaiye.github.io/test1/

现在我来分析下一些自己觉得有技巧的效果实现方式:

1、搜索框与登录效果的实现

05c384d3550a12961e3344a4aae6c7a5.png

代码:

9ee19d730876b7058fa83f3018615736.png

利用padding-left值空出来的位置,然后调整背景图x、y轴的坐标;登录效果的实现也是如此。

2、类似双重边框的实现

2c46bf923372895b25fbd73214e2a5ac.png

代码(父元素):

8f6d2bc104f6bbe8f6bc5b2d3ef03e35.png

代码(子元素):

d10e4034df6b72bdd1e4fadd67b3dc6e.png

通过两个背景颜色不一的圆叠加,营造出双重边框的效果。

3、CSS3制作一个tab选项卡:

0d49571c59d7f5a6606aadd1a132b569.png

开发步骤一:将父元素设置为相对定位;

开发步骤二:将li元素设置为浮动;

开发步骤三:隐藏input以及承载表格的div;

开发步骤四:设置id为tab开头的、属性为checked的元素以及当下一个id以tab_menu开头的元素被点击时的样式,这个为核心代码:

2a5b6bd046981d09ba1dd99282f189bd.png

开发步骤五:相关原理与开发步骤四类似:

8052d9dd9c8ff733801090ef572e2c7c.png

4、ul元素的巧用:

53864cac56f28782e29058e1b5e0148b.png

中间三大块利用ul中li元素中嵌套div进行设置和布局,这实在是我一开始想不到的,比我的方法简洁了许多。果然脑子是个好东西。

5、元素的空内容应用:

43782a13ddb58b3aadb2bf6703515ae6.png

头部使用li元素,中间使用浮动的p元素设置宽高,p元素内含两个子元素,其中空白的部分只是没有添加内容而已,只怪自己当初想的太复杂。

7、类进度条的制作:

0471f756325bba8d8c4a72135926b0b6.png

还是老技巧,利用父元素与子元素的重叠。其实用HTML 新元素progress处理也是可以,只不过背景颜色处理上有些麻烦,以及它的兼容性问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个 DRF 实现多级嵌套数据的完整例子,展示了如何使用 Serializer 嵌套来实现多级嵌套数据的 API: models.py: ```python from django.db import models class Category(models.Model): name = models.CharField(max_length=50) def __str__(self): return self.name class Product(models.Model): name = models.CharField(max_length=50) price = models.DecimalField(max_digits=8, decimal_places=2) category = models.ForeignKey(Category, on_delete=models.CASCADE) def __str__(self): return self.name ``` serializers.py: ```python from rest_framework import serializers from .models import Category, Product class ProductSerializer(serializers.ModelSerializer): class Meta: model = Product fields = ('id', 'name', 'price') class CategorySerializer(serializers.ModelSerializer): products = ProductSerializer(many=True) class Meta: model = Category fields = ('id', 'name', 'products') ``` views.py: ```python from rest_framework import viewsets from .models import Category, Product from .serializers import CategorySerializer, ProductSerializer class ProductViewSet(viewsets.ModelViewSet): queryset = Product.objects.all() serializer_class = ProductSerializer class CategoryViewSet(viewsets.ModelViewSet): queryset = Category.objects.all() serializer_class = CategorySerializer ``` 在上面的例子中,Category 表示类别模型,其中包含了类别的名称,Product 表示产品模型,其中包含了产品的名称、价格和所属类别。在 ProductSerializer 中,表示产品的序列化器,只包含了产品的基本信息。在 CategorySerializer 中,表示类别的序列化器,通过 ProductSerializer 来嵌套表示产品的信息。在 CategoryViewSet 和 ProductViewSet 中,分别表示类别和产品的 API 视图集合,其中 CategoryViewSet 中的 queryset 包含了所有的类别,ProductViewSet 中的 queryset 包含了所有的产品。通过访问 /categories/ 可以获取所有的类别信息,包含了每个类别的所有产品信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值