由我YouOwn-设计分享平台-首页

主题：视频播放和导航样式

我YouOwn-设计分享平台-首页

欢迎来到我YouOwn的个人设计分享平台！这是一个专注于用户体验和视觉效果的设计资源库，旨在提供灵感和解决方案。在这个页面中，我们将展示一个具有视频播放功能和简单导航设计的网站布局示例。

视频播放器样式

这个示例使用了一个简单的.video-js类来定义视频播放器的宽度、高度和流式布局。通过设置.vjs-fluid类，视频播放器将填充其父容器的高度的16:9比例，并在顶部留出适当的空间以适应标题栏和播放控件。

<div class="video-js">
<video src="path/to/video.mp4" class="video-js vjs-default-skin"></video>
</div>

导航样式

为了实现简单而现代的导航栏，我们使用了.wc-swiper-container类来包裹导航项，并使用.wc-default-swiper-box类定义滑动容器和页码容器的高度为100%。导航项使用.wc-pagination类进行定位，位于底部，高度为18px。页码使用.wc-dot类定义小圆点的样式。

<div class="wc-swiper-container">
<div class="wc-default-swiper-box">
<div class="wc-swiper">
<div class="wc-slider">
<div class="wc-slide" style="width: 33.33%;">Slide 1</div>
<div class="wc-slide" style="width: 33.33%;">Slide 2</div>
<div class="wc-slide" style="width: 33.33%;">Slide 3</div>
</div>
</div>
</div>
<div class="wc-pagination">
<span class="wc-dot"></span><span class="wc-dot"></span><span class="wc-dot"></span>
</div>
</div>

以上是关于我YouOwn设计分享平台首页的一些示例代码，展示了视频播放和简单导航的样式设计。你可以根据自己的需求进行调整和扩展，创建出独特的设计效果。希望这些示例能为你的项目带来灵感和帮助！