云贸通官网

云贸通官网是一个供应链服务平台，为用户提供智慧关务、报关申报、跨境贸易、商品预归类、进出口通关等全方位的一站式服务。通过使用简洁、优雅的CSS样式，以及响应式设计，使得网站在各种设备和屏幕尺寸上都能提供良好的用户体验。

网站样式

  • .video-js:设置视频播放器的宽度为300px,高度为150px。
  • .vjs-fluid:not(.vjs-audio-only-mode):设置非音频模式下的视频播放器容器高度为视口高度的56.25%。
  • *,:after,:before{box-sizing:border-box}:对于所有的元素，设置边框盒模型为border-box,确保元素的总宽度包括其内边距和边框。
  • h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1;margin:0;padding:0}:设置所有标题元素的字体权重为400,行高为1,外边距和内边距均为0。
  • a:active,a:focus{outline:none}:设置链接处于激活状态或聚焦状态时的轮廓线为无。
  • a,a:focus,a:hover{color:inherit;cursor:pointer;text-decoration:none}:设置链接颜色继承父元素的颜色，鼠标指针样式为手形，无下划线。
  • body{background-color:#eee;margin:0;padding:0}:设置页面背景颜色为#eee,外边距和内边距均为0。
  • span{font-style:normal}:设置所有span元素的字体样式为正常。
  • div,span{font-weight:400}:设置所有div和span元素的字体权重为400。
  • div{overflow-wrap:anywhere;-webkit-font-smoothing:subpixel-antialiased}:设置div元素的内容自动换行，并启用webkit字体平滑处理。

响应式设计

通过使用响应式设计技术，云贸通官网能够适应不同设备和屏幕尺寸，提供一致的用户体验。这包括使用媒体查询(Media Query)来根据设备的特性调整布局和样式。例如，当屏幕宽度小于某个特定值时，可以应用特定的样式规则，以适应小屏幕设备。